slide-block

by Oleh Kotsubko

HTML

<div class="wrapper">
  <div class="block red">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos reprehenderit molestias vitae repudiandae dolorum, quas, harum aut! Doloremque vitae laborum ipsum enim dignissimos qui asperiores nisi, ea saepe nulla cupiditate.</p>
</div>
<div class="block green">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos reprehenderit molestias vitae repudiandae dolorum, quas, harum aut! Doloremque vitae laborum ipsum enim dignissimos qui asperiores nisi, ea saepe nulla cupiditate.</p>
</div>
<div class="block black">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos reprehenderit molestias vitae repudiandae dolorum, quas, harum aut! Doloremque vitae laborum ipsum enim dignissimos qui asperiores nisi, ea saepe nulla cupiditate.</p>
</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper {
  height: 1000px;
}
.block {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20%;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 transition: .3s ease-in-out;
}

.red {
  background-color: red;
  z-index: 3;
}
.green {
  background-color: green;
  z-index: 2;
}
.black {
  background-color: #000;
  z-index: 1;
}

JavaScript

let dHeight = 0;

$('.wrapper').children().each(function(){
	dHeight+=$(this).outerHeight(true);
});

$('.wrapper').css('height',dHeight);

$(document).on('scroll', function(){
	let scrollT = $(this).scrollTop(),
  	  vHeight = $(window).height();
  	 
	   if( scrollT < vHeight ) {
  	    $('.red').css({
          "-webkit-transform":"translate(0,-"+scrollT+"px)",
          "-ms-transform":"translate(0,-"+scrollT+"px)",
          "transform":"translate(0,-"+scrollT+"px)"
        });
        
      } else if( scrollT < vHeight*2 && scrollT > vHeight ) {
  	    $('.green').css({
          "-webkit-transform":"translate(0,-"+(scrollT-vHeight)+"px)",
          "-ms-transform":"translate(0,-"+(scrollT-vHeight)+"px)",
          "transform":"translate(0,-"+(scrollT-vHeight)+"px)"
        });
      }
  
  
 
});