xxxxxxxxxx
svg {
position: fixed; /* make sure it stays put so we can see it! */
animation: rotate 1s linear infinite;
/*animation-play-state: paused;*/
animation-delay: calc(var(--scroll) * -1s);
}
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
/* Add CSS animation to the element */
.fade-in {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
/* Apply the fade-in animation when element enters the viewport */
.fadeIn-on-scroll {
visibility: hidden;
}
.fadeIn-on-scroll.fade-in {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="fadeIn-on-scroll fade-in">
<!-- Content to fade in when scrolled into viewport -->
<h1>Hello, World!</h1>
<p>Scroll down to see the fade-in animation.</p>
</div>
<script>
// Add a scroll event listener to trigger the animation
window.addEventListener('scroll', function() {
// Get the element
var element = document.querySelector('.fadeIn-on-scroll');
// Get the position of the element
var position = element.getBoundingClientRect();
// Check if the element is in the viewport
if (position.top <= window.innerHeight && position.bottom >= 0) {
// Add the fade-in class to trigger the animation
element.classList.add('fade-in');
}
});
</script>
</body>
</html>
xxxxxxxxxx
<div data-aos="fade-up"
data-aos-anchor-placement="center-center">
</div>