3
I would like to know how to do the effect of revealing items when the scroll of the page reaches the element, example of this site: http://www.metodistapirassununga.org/
The effect is on the blocks with images, which appear as you lower the scroll.
0
Unused plugins, except the good jQuery, the script below makes equal effect. Just add the class .mostar at divs that wants the effect. I made a simple animation of fade in but may be adapted for another purpose as desired:
$(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>Browser other questions tagged jquery html css
You are not signed in. Login or sign up in order to post.
Guys, I figured out how to do it, just have scrollreveal.js which is a framework, not to have to explain in detail, just search for scrollreveal that already finds enough information (in English). For those who want the place where I understood it better this one: https://www.youtube.com/watch?v=ePgnR4gHIi4
– Matheus Lopes Marques