Hello!
Basically I am trying to create this effect.
The problem is that in the codepen the code works fine, but when I transfer it in a local file it gets reaaally laggy.
Maybe this code is old or there is something else?
Iam trying to have an image with blur effect, and unblur only part of it when the cursor is scrolling over it.
Maybe there is a more easy way to make it?
I am trying to implement it, inside a carousel, so the code cannot understand the right coordinates of the cursor.
If someone has done something like that before, or a similar effect, please let me know
Filters are pretty processor intensive so can cause lag especially with mousemove. You may be able to make it appear less laggy by reducing the setTimeout in your JS.
It is set at 300 so try 100 instead.
setTimeout(function(){
circle.style.opacity = '0';
setTimeout(function(){
mask.removeChild(circle);
}, 100);
}, 100);
I have an old version that I just updated to use blur and seems smoother although its not exactly the same effect,
Yes the demos are only for one element you would need to loop through all the relevant elements and apply the js to each in turn. It looks as though that would be quite hard for the mask method you are using but would likely be simpler in my demo to implement. However I haven’t looked in detail at that. There is also the problem of what carousel you are using and how to implement code into that nicely.
It would be much easier if you just did a whole image unblur instead of the mouse cursor method. the reverse of this effect basically.
Just added a demo for more than one image.
JS is not really my area so I’m sure there are improvements to be made.
It may help if you can show a demo of the carousel where you are trying to implement it or at least a demo of the carousel you are using.
There are so many carousels around that its impossible to give a basic answer.
Indeed it may be that you only want a very basic css carousel with no controls so we really have to see what you have or what you expect 
Ok yes I will make a demo in the codepen to show it!
Also is there any way that the circle is not with a straight edge, but ending with the blurred effect like the first one?
Should I use the mask element like the svg or something?
I think the mask is what slows the demo down and makes it very laggy so i would avoid that.
You can add a box shadow to my demo that will give a slight blur but I know its not the same.
I think it looks better though and is so much smoother than your demo.
Yes that’s true about the mask.
Thanks I will try it!
As proof of concept I have added the blur routine to an old (practice) slider/carousel that I wrote a while ago.
Bear in mind that JS is not my forte and the slider was never meant for public consumption but as a proof of concept then all elements are present.
ohh great thank you very much!!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.