I have a very sublet keyframe animation. I'd like for it to play every single time the page has been scrolled - not just once when coming in the viewpoint. Each time the scroll is touched. All I can find is running once in viewport - which is fine, but it needs to play every time the scroll is touched in the viewport. Any ideas?
/* CSS */
.aha-section .pixels .light {
margin-top: 4px;
margin-left: 33px;
animation: slide 2s 1;
}
@keyframes slide {
from {
margin-left: 33px;
}
50% {
margin-left: 45px;
}
to {
margin-left: 33px;
}
}
You will need to use some JavaScript... then you will listen to the scroll event to do the desired function...
To trigger a animation set a class to it:
.scrolled .aha-section .pixels .light {
animation: slide 2s 1;
}
and let the javascript add this class when the event scroll happens:
document.body.className += ' scrolled';
hope it helps to show you the direction.
let animated = false;
window.addEventListener("scroll", (event) => {
animateOnScroll();
});
function animateOnScroll(){
if(animated == false){
animated = !animated;
document.body.className += ' scrolled';
setTimeout(function() {
animated = false;
document.body.classList.remove('scrolled');
}, 2000); //match whatever time set on css animation
}
}.aha-section {
position: fixed;
}
.aha-section .pixels .light {
margin-top: 4px;
margin-left: 33px;
}
.scrolled .aha-section .pixels .light {
animation: slide 2s 1;
}
@keyframes slide {
from {
margin-left: 33px;
}
50% {
margin-left: 45px;
}
to {
margin-left: 33px;
}
}
.scroll-emulator {
height: 2500px;
}<div class="aha-section">
<div class="pixels">
<div class="light">Light</div>
</div>
</div>
<div class="scroll-emulator"><div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments