CODEWITHSUNDEEP
jquerycssscroll
rnDesto
rnDesto

Reputation: 259

how to make page reveal effect on scrolling with jquery

I am trying to make reveal effect on my web with scrolling and its run well on the first layer. But its kinda confusing to give effect layer behind after front layer finish scrolling.

How I continue showing layer behind after front layer is finish scrolling? any suggestion would be great, thank you

$(document).ready(function(){
	
	$(window).on('scroll', function(){
		var wHeight = $(window).height();
		var scrollTop = $(window).scrollTop();
		$('.box3').css('transform','translateY(-'+ scrollTop +'px)');
		if(scrollTop > 700){
			$('.box2').css('transform','translateY(-'+ scrollTop-wHeight +'px)');
		}
	});
	
});
.boxWrapper {
  position: fixed;
  overflow: hidden;
  background-color: #fafafa;
  width: 100%;
  height: 100vh;
}
.boxWrapper p{
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 20px;
  color: #fff;
}
.box{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.box1{
  background-color: #f00;
}
.box2{
  background-color: #0f0;
}
.box3{
  background-color: #00f;
}

.content {
  height: 3000px;
  background-color: #e6e6e6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxWrapper">
	<div class="box box1"><p>box1</p></div>
	<div class="box box2"><p>box2</p></div>
	<div class="box box3"><p>box3</p></div>
</div>
<div class="content">
	
</div>

Upvotes: 0

Views: 284

Answers (1)

R&#252;zgar
R&#252;zgar

Reputation: 997

You are missing brackets, Just change : 

$('.box2').css('transform','translateY(-'+ scrollTop-wHeight +'px)');

to

$('.box2').css('transform','translateY(-'+ (scrollTop-wHeight) +'px)');

And you're good.

Upvotes: 1

Related Questions