How to display/show multiple div elements one by one using jquery?
Question
I have multiple div elements in a HTML page. These divs are animating one window scroll. The problem is when I scroll the scroll bar, all the divs are animated at once. I don't want this. If the scroll bar reaches a specific position, I want a single div animated and after this, a second div should animate and so on. In other words, I want to animate multiple divs one by one on window scroll. I am using custom animation. My jQuery code:
$(document).ready(function(){
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y < 500) {
$('.demo').addClass('intro');
}
else{
$('.demo').addClass('fadeInUp');
}
});
});
My CSS code with custom animation:
.intro{
opacity:0;
}
.styling {
height: 300px;
width: auto ;
background-color: red;
margin-top: 10px;
}
@-webkit-keyframes fadeInUpA {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpA {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInUp {
animation-duration: 3s;
animation-delay: 2s;
-webkit-animation-name: fadeInUpA;
animation-name: fadeInUpA;
animation-fill-mode: both;
}
My HTML code is following
<body>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
</body>
4 answers
solution1
1 2020-12-19 11:02:21
Your code needs to be aware of each div position on scroll, consider using $('.intro').offset().top to get an element position relative to the document. Also, the height of each div must be considered in order to know if $(this).scrollTop() is getting closer to an element.
I would suggest you to use a plugin to achieve this: https://wowjs.uk/
solution2
0 2020-12-19 11:00:36
If you seek a good solution I recommend animejs . But if you want to do it by yourself you can just simply get all your elements and add your animation class through a loop:
const elements = documents.querySelectorAll('.intro');
elements.forEach(el => {
setTimeout(() => {
el.classList.add('fadeInUp')
}, 1000);
});
solution3
0 2020-12-19 11:01:51
I made a fixed version for you, not 100% sure if this is what you wanted, let me know if something is wrong.
The problem with your divs animating all at one time is that they all had same animation-delay , so I fixed that by commenting it out inside css and adding custom animation-delay to each div , as you will see in my code, so basically, each div now has 0.5s longer animation-delay then the previous one.
Let me know if it worked:)
solution4
0 ACCPTED 2020-12-19 11:10:25
The problem is you are adding class to all your divs at once. First check if the div is visible after scroll and then add class to that div.
$(document).ready(function() { $(document).scroll(function() { animate(); }); animate(); function animate() { var $divs = $(".demo"); $.each($divs, function() { if (isVisible(this)) { $(this).addClass('fadeInUp'); } else { $(this).addClass('intro'); } }); } function isVisible(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } });
.intro { opacity: 0; }.styling { height: 300px; width: auto; background-color: red; margin-top: 10px; } @-webkit-keyframes fadeInUpA { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpA { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } }.fadeInUp { animation-duration: 3s; animation-delay: 2s; -webkit-animation-name: fadeInUpA; animation-name: fadeInUpA; animation-fill-mode: both; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="intro styling demo"></div> <div class="intro styling demo"></div> <div class="intro styling demo"></div> <div class="intro styling demo"></div> <div class="intro styling demo"></div> <div class="intro styling demo"></div> <div class="intro styling demo"></div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.