How to reveal items when arriving in a certain scroll

Question

How to reveal items when arriving in a certain scroll

Navigation

#1 by (0 votes)

3

I'd like to know how the effect of revealing items is made when the scroll of the page reaches the element, example of that site: link
The effect is in the blocks with images, which appear as you scroll down.

html jquery css

asked by anonymous 04.11.2017 / 00:53

1 answer

Redirect page with error message How to assign values to a vector?

score 0 · Accepted Answer

Without using plugins , except for the good jQuery, the script below does the same effect. Just add the class .mostar to the divs you want the effect. I made a simple animation of fade in but can be adapted to any other effect you wish:

$(window).on("load scroll", function(){
	$(".mostrar").each(function(){
		var el = $(this);
		var eleHeight = el.outerHeight(); // altura da div
		var eleTopo = el.offset().top; // distancia da div ao topo do documento
		var scrlTopo = $(window).scrollTop(); // quanto foi rolada a janela
		var distance = eleTopo-scrlTopo; // distancia da div ao topo da janela
		var altJanela = window.innerHeight; // altura da janela
		if(distance <= altJanela-(eleHeight/2)) {
			el.animate({ 'opacity': 1 }, 400);
		}
	});
});

div{
	display: block;
	width: 100%;
	height: 200px;
	background: red;
	float: left;
}
.mostrar{
	opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="mostrar">
	div 1
</div>
<div class="mostrar">
	div 2
</div>
<div class="mostrar">
	div 3
</div>
<div class="mostrar">
	div 4
</div>
<div class="mostrar">
	div 5
</div>