Planeé construir un sitio web y parece que no encuentro ninguna forma de cronometrar las animaciones. Aquí hay un ejemplo:
<!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>Mi idea del tiempo es que la manzana solo comienza a aparecer cuando es visible para el visitante del sitio web. tienen alguna idea?
Puedes usar el CSS animation-delay . El siguiente código debería funcionar.
<!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>El siguiente código debería funcionar:
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);Si esto no funciona, házmelo saber e intentaré ayudarte un poco más. :)
para ese caso específico, debe determinar si el usuario se desplazó al área donde colocó la manzana y, si lo hizo, puede agregar una clase al elemento para mostrarlo. Cuando agrega clase al elemento, la animación se iniciará automáticamente.