Blur Background Image on Mouse Wheel Scroll

Question

I am having some problems figuring out how to blur a background image on mouse wheel scroll and was hoping an experienced front end web dev person could help me out. I just started learning js.

A lot of the solutions I have found only let the background image change on actual scroll, meaning by going down the page where it changes depending on x amount of pixels. Basically, I want to be static, like this codepen: https://codepen.io/sotayamashita/pen/pqLcv

However, this codepen doesn't work on on my website: https://test2-43.superhi.com/

I don't know how to get the solution to either reduce the opacity of a clear image on top of a blurred, to create this blurring effect on scroll or to actually change the blurring filter on one background image on scroll.

Any help is really appreciated.

Does this answer your question? [Where should I put – Lawrence Cherone May 27 '21 at 13:18 — Lawrence Cherone, May 27 '21 at 13:18

score 1 · Answer 1 · edited May 27 '21 at 13:14

1

The codepen you linked has the jQuery imported. That's why your page isn't working. If you press F12 and view the developer console you can see that it can't find the '$' symbol which is associated to jQuery.

Add the following code at the bottom of the page:

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

(This is taken from jQuery's own CDN link)

edited May 27 '21 at 13:14

Dharman

30,962
25
85
135

answered May 27 '21 at 13:08

felkan

11
1
2

Hey, thanks for your help. I updated the link but even with the code at the end - it still won't work. Do you have any idea why? – DianaG May 27 '21 at 13:14
the actual issue is the script is being executed before you imported jquery – Lawrence Cherone May 27 '21 at 13:17
@DianaG You need to wrap your code snippet inside $(document).ready( -- your code here -- ); – felkan May 27 '21 at 13:21

Blur Background Image on Mouse Wheel Scroll

1 Answers1