I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Have you ever wonder how to make the gooey/blob effect without SVGs, only with CSS3? Well, it's easy. It's so easy that I wanted to make this gooey/blob story a bit more complicated - with Javascript. If that even means it will be complicated. :)

COIDEA - Blob Cursor with Background Images

Today, I want to share with you one simple snippet created with CSS3 and pure Javascript to show you how to create gooey/blob circle, animate it, display it instead of default cursor pointer and how to change background image of custom cursor every time when the mouse pointer moves inside the element (in our example, when the mouse pointer moves over items/numbers).

Basically, everything that matters to the gooey/blob effect in this snippet is made with CSS3's keyframes which I execute infinitely in the loop.

But, every time when the mouse pointer moves inside the element (over numbers in the demo), with Javascript I collect background image of the hovered element, scale custom cursor a little bit and show collected image as a background image of the custom cursor. To show you how to handle click and to animate cursor one step further, I created one more simple animation which executes every time we click the number in the demo. Try it!

As said, I made this example only to show you how to create a gooey/blob effect and how to change the background image of it every time when the mouse pointer moves inside the element. By this example, I wanted to give you an idea and a basic code, which can be used only as a starting point for more complex tasks and that's it. Check out demo, download and test code, enjoy and create after that something awesome.

References and Credits