A Pen by Jean Luc Houedanou.

asvpr.markdown

asvpr

A Pen by Jean Luc Houedanou on CodePen.

License.

index.html

<div id="ecran2" class="diapo" data-type="background" data-speed="15">
  <p class="absolu2">Abidjan</p>
</div>
<div id="ecran1" class="diapo" data-type="background" data-speed="5">
  <p class="absolu">Blur</p>
</div>

script.js

$(document).ready(function() {
      var $window = $(window); 
   $('div[data-type="background"]').each(function(){
    var $bgobj = $(this); 
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));
            var coords = '50% '+ yPos + 'px';
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

style.css

*{
  margin:0;
  padding:0;
}
.absolu{
  color:white;
  text-shadow:0px 0px 4px #000;
  width:50%;
  position:absolute;
  left:50%;
  top:50%;
  font-size:40px;
}
.absolu2{
  color:white;
  text-shadow:0px 0px 4px #000;
  width:50%;
  position:absolute;
  left:50%;
  top:50%;
  font-size:40px;
}
#ecran1{
  position:relative;
  width:100%;
  height:500px;
    background: url(http://houedanou.com/images/DSC02763.png) no-repeat center bottom #FFF fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://houedanou.com/images/DSC02763.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://houedanou.com/images/DSC02763.png',
sizingMethod='scale')";
}
#ecran2{
  position:relative;
    width:100%;
  height:500px;
    background: url(https://pbs.twimg.com/profile_banners/405385799/1399223308/1500x500) no-repeat center bottom red fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='https://pbs.twimg.com/profile_banners/405385799/1399223308/1500x500',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='https://pbs.twimg.com/profile_banners/405385799/1399223308/1500x500',
sizingMethod='scale')";

}