jquery – How to reveal items when you reach a certain scroll

Question:

I would like to know how the effect of revealing items is done when the page scroll reaches the element, example from this site: http://www.metodistapirassununga.org/
The effect is in the blocks with images, which appear as you lower the scroll.

Answer:

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

$(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>
<div class="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>
Scroll to Top