DEV Community

Discussion on: Modify existing code to what Im more familiar with

View post

Replies for: Thanks for your feedback Jordan, I will try the eventlistener approach. I think for me I need to just sit through all this stuff and figure it out ...

Collapse
 
jordanfinners profile image
Jordan Finneran • • Edited

You could add this to your react component:

componentDidMount() {
    document.addEventListener('scroll', this.handleScrollEvent);
  }

  componentWillUnmount() {
    document.removeEventListener('scroll', this.handleScrollEvent);
  }
Enter fullscreen mode Exit fullscreen mode

In handleScrollEvent function (that you create) you can then use document.documentElement.scrollTop to find out how far down the page you are.
You can also use document.documentElement.scrollHeight to find out how long the page is.

Then you can do some maths with those two values to set the amount of blur you want on your image, for example using CSS filter e.g. filter: blur(4px);

One thing to watch out for is to make sure you blur maths to calculate what amount of blur to apply works when you scroll up and down.

Apart from the componentDidMount and componentWillUnmount, this is all plain JavaScript too, so would work for any other framework!
Hope that helps, let me know if you need any other help :)