Estoy tratando de ejecutar un código CSS a cierta altura en el desplazamiento.
Apreciaría tu ayuda:)
aquí hay un poco de código.
@keyframes fadeInTop{ 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); } }¡Gracias!
aquí está la solución
1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple scroll example</title> <style> body { overflow: hidden; } section { height: 100vh; width: 100%; overflow: auto; background-color: #f0db4f; } section p { height: 300vh; } </style> </head> <body> <section id="section_scroll" class="scroll-section" > <p>Mouse Scroll Down</p> </section> <script> const link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = "1.css"; const cssRunPosition = 100; const scrollSection = document.getElementById("section_scroll"); scrollSection.addEventListener("scroll", event => { const y = scrollSection.scrollTop; if(y > cssRunPosition) { scrollSection.appendChild(link); } }, { passive: true }); </script> </body> </html>1.css
.scroll-section { animation-name: fadeInTop; animation-duration: 0.5s; } @keyframes fadeInTop{ 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); } }