Eu gostaria de saber como se faz o efeito de revelar itens quando o scroll da página chega até o elemento, exemplo desse site: http://www.metodistapirassununga.org/
O efeito está nos blocos com imagens, que aparecem conforme vai abaixando o scroll.
-
galera, eu descobri como fazer, basta ter o scrollreveal.js que é um framework, pra nao ter que explicar detalhadamente, basta procurar por scrollreveal que ja acha bastante informações (em ingles). Pra quem quer o local em que entendi melhor esta aqui: youtube.com/watch?v=ePgnR4gHIi4 – Matheus Lopes Marques 4/11/17 às 0:55
comentar
|
Sem usar plugins, exceto o bom jQuery, o script abaixo faz efeito igual. Basta adicionar a classe .mostar
às divs
que deseja o efeito. Fiz uma animação simples de fade in
mas pode ser adaptado para outro efeito que desejar:
$(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>