I planned on building a website and I don't seem to find any way to time the animations. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
.image {
animation-name: appear;
animation-duration: 5s;
}
.extremebig {
font-size: 200px;
}
@keyframes appear {
0% {opacity: 0;}
100% {opacity: 1.0;}
}
</style>
</head>
<body>
<p class="extremebig">hello!</p>
<img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" class="image"/>
</body>
</html>My idea of timing it is that the apple only starts appearing when it is visible to the visitor of the website. Do you guys have any idea?
You can use the CSS animation-delay. The code below should work.
<!DOCTYPE html>
<html>
<head>
<style>
.image {
animation-name: appear;
animation-duration: 5s;
animation-delay: /* However long you want the delay to be */;
}
.extremebig {
font-size: 200px;
}
@keyframes appear {
0% {opacity: 0;}
100% {opacity: 1.0;}
}
</style>
</head>
<body>
<p class="extremebig">hello!</p>
<img src="https://www.pngplay.com/wp-content/uploads/6/Red-Leafy-Apple-Fruit-Transparent-PNG.png" class="image"/>
</body>
</html>
The code below should work:
function reveal() {
var reveals = document.querySelectorAll(".image");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
If this doesn't work, let me know and I'll try help you some more. :)
for that specific case you need to determine did user scrolled to the area where you placed apple, and If he did, you can add class to element to display it. When you add class to the element, animation will automatically start.