Estoy al principio de aprender JS, en este momento lo que me molesta es que quiero animar la opacidad de un div cuando se detecta el desplazamiento. Tengo 2 opciones de lo que he encontrado en línea:
window.addEventListener('scroll',function());o
window.onscroll()=function();Usando la primera variante y la consola, veo que está detectando el desplazamiento, pero aquí viene mi problema.
Dejar:
let loadingscreen=document.getElementsByTagName('div')[3]; loadingscreen.style.opacity="0";¿Por qué no funcionará esto?
window.addEventListener('scroll',()=>{ console.log("!"); //detecting the scroll in the console setInterval(function(){loadingscreen.style.opacity+=".1"},100);});`La opacidad solo cambia una vez, creo que es de 0 a 0.1
¿Será que mi opacidad va de 0 a 0.1 a 0.11 a 0.111? Aunque no puedo entender por qué sería eso. ¡Gracias por tomarse su tiempo para leer esto, cualquier respuesta es apreciada!
Sé que el código no se ve tan ordenado, prometo que es mejor en mi vsc, tengo un pequeño problema con stackoverflow
Esto se debe a que está agregando una cadena a otra cadena, no un número a otro número. Si desea agregar 0.1 de opacidad cuando se detecta desplazamiento, deberá analizar el valor de opacidad con parseInt(loadingscreen.style.opacity) , luego agregar 0.1 y luego aplicarlo a loadingscreen.style.opacity .
Sin embargo:
los eventos de desplazamiento pueden dispararse a una velocidad alta
consulte https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event
Entonces, si se desplaza una vez, su controlador de eventos tal vez se active 20 veces, y cada vez que se agregue un detector de eventos. Entonces, primero debe agregar { once: true } a sus opciones de eventListener.
En segundo lugar, está agregando más opacidad cada 100 milisegundos.
Si desea una buena animación, debe agregar una clase y animar la opacidad en CSS.
Considere el siguiente ejemplo:
let loadingscreen = document.querySelector(".loadingscreen"); window.addEventListener("scroll", () => { loadingscreen.classList.add("scrolled"); }, { once: true } ); body { height: 200vh; } div.loadingscreen { margin-top: 25%; height: 50%; width: 100%; background: red; opacity: 0; } div.loadingscreen.scrolled { opacity: 1; transition: opacity 1s linear; } <div class="loadingscreen"></div> const loadingscreen = document.getElementsByTagName('div')[2]; loadingscreen.style.opacity= 0; let incOpa = 0 function callIncOpacity(){ let refreshIntervalId = setInterval(function(){ console.log(incOpa); //detecting the scroll in the console if(incOpa < 1) { incOpa += 0.1; loadingscreen.style.opacity = incOpa } }, 10); setTimeout(function(){ clearInterval(refreshIntervalId); }, 100) } window.addEventListener('scroll',()=>{ if(incOpa < 1) callIncOpacity() }); .content-container, .second-div, .third-div{ height: 500px; width: 100% } <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <div class="content-container"> <p> Test content </p> </div> <div class="second-div"> <p> test content 1 </p> </div> <div class="third-div"> <p> test content 2 </p> </div> </body> </html>Dos cosas a tener en cuenta.