Dynamically changing image to rgb and grayscle when scrolling

November 27, 2021

I’m pretty new to JavaScript and trying to make my image from RGB to Grayscale while scrolling down and vise versa. I managed my image to get grayvalued when scrolling however I don’t get back to the RGB image.

My code for JavaScript is:

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'
    
    
  }
};

It’s also public on https://jsfiddle.net/vdszymh7/139/

Maybe you have some suggestions how to dynamically change between these two modes.

>Solution :

What you’re trying to achieve could be done by this way:

window.onscroll = function() {
  var scrollLimit = 100;
  if (window.scrollY >= scrollLimit) {
    element.style.filter = 'grayscale(1)';
    console.log('gray')
  } else {
    element.style.filter = 'none'
  }
};