Me gustaría cambiar la imagen src de una imagen (¿o usar alguna otra técnica?) en mi barra de menú fija cuando me desplazo hacia abajo.
Aquí está mi html:
<header> <a href="/"> <img src="img1.jpg" width="200px" height="100px"> </a> </header> <main> ...El encabezado es fijo. Por lo tanto, permanece en la parte superior de la página durante el desplazamiento todo el tiempo.
Ahora, me gustaría hacer la transición (¿si eso es posible con x-show.transition o la transition de CSS?) cuando empiezo a desplazarme.
Entonces, cuando empiezo a desplazarme, la imagen comienza a reducirse a la nueva dimensión de la imagen y luego se desvanece y se reemplaza con la nueva imagen img2.jpg con las nuevas dimensiones width="150px" y height="80px" .
¿Cómo hacer eso en puro Alpine js?
No tengo experiencia con Alpine JS, así que resolví esto con CSS y JS estándar.
Comience por darle una identificación a su objeto img, luego agregue el estilo a continuación al objeto.
#img { transition: .5s; }Usé un detector de desplazamiento y verifiqué el valor de desplazamiento.
const elem = document.getElementById("img"); window.onscroll = function() { if(window.scrollY>=40){ //user scrolled to the top of the page elem.style.height = "80px"; elem.style.width = "150px"; } else { //user scrolled to the top of the page elem.style.height = "100px"; elem.style.width = "200px"; } };