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 se valorizara en 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.

0
user17523218 27 nov. 2021 a las 13:23

1 respuesta

La mejor respuesta

Lo que está tratando de lograr se puede lograr 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'
  }
};
0
p4avinash 27 nov. 2021 a las 13:34
Gracias. Eso fue todo. A veces la solución es muy sencilla ...
 – 
user17523218
27 nov. 2021 a las 13:40
Eres bienvenido amigo, puedes dar un voto a favor a esta solución .. !! ;-)
 – 
p4avinash
27 nov. 2021 a las 13:43