A Pen by Jean Luc Houedanou.

Effet-carte-jquery.markdown

Effet carte jquery

A Pen by Jean Luc Houedanou on CodePen.

License.

index.html

<div class="wrapper">
    <div id="section1" class="section">
	    <div class="insidelediv">
	      Div1
	    </div>
    </div>
    <div id="section2" class="section">
	    <div class="insidelediv">
	      div2
	    </div>
    </div>
    <div id="section3" class="section">
  	  <div class="insidelediv">
	      div3
	    </div>
    </div>   
</div>

script.js

$(document).ready(function() {
      var winWidth =$(window).width();
      var winHeight = $(window).height();
        var scrollTop = winHeight;
        var dubHeight = winHeight*2;
	      var treHeight = winHeight*3;
     $('.section').css('height',winHeight); 
  $('.insidelediv').css('height',winHeight); 
    //effet pin
        $(window).scroll(function() {
    
	// et ainsi de suite en fonction du nombre de div
          //var foHeight = dubHeight*2;
          if(($(window).scrollTop() >= 0) && ($(window).scrollTop() < winHeight)){
	          $('#section1 .insidelediv').css('position','fixed');
	          $('#section1 .insidelediv').css('top','0');
             $('#section1 .insidelediv').css('z-index','1');
	        }else{
	          $('#section1 .insidelediv').css('position','relative');
	        }
        });
});

style.css

*{margin:0; padding:0;z-index:0}
.section{
  text-align:left
}
#section1{
  background:url(url("http://photos-a.ak.instagram.com/hphotos-ak-xfp1/10544289_315479355280464_554998801_n.jpg");
  z-index:0
}
#section2{
  background:red;
  z-index:1;
}
#section3{
  background:yellow;
  z-index:3
}