Soy bastante nuevo en JavaScript y trato de hacer mi imagen de RGB a escala de grises mientras me desplazo hacia abajo y viceversa. Logré que mi imagen tuviera un valor de gris al desplazarme, sin embargo, no vuelvo a la imagen RGB.
Mi código para JavaScript es:
let element = document.getElementById("image"); window.onscroll = function() { var scrollLimit = 100; if (window.scrollY >= scrollLimit) { element.style.filter = 'grayscale(1)'; } else { element.src = 'ttps://images.unsplash.com/photo-1542903660-eedba2cda473?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80' } };También es público en https://jsfiddle.net/vdszymh7/139/
Tal vez tenga algunas sugerencias sobre cómo cambiar dinámicamente entre estos dos modos.
Lo que estás tratando de lograr podría hacerse de esta manera:
window.onscroll = function() { var scrollLimit = 100; if (window.scrollY >= scrollLimit) { element.style.filter = 'grayscale(1)'; console.log('gray') } else { element.style.filter = 'none' } };