Gooey mouse follow

Developer
Keyon
Size
2,876 Kb
Views
4,048
  1. Gooey mouse follow Previews
  2. Gooey mouse follow HTML Codes
  3. Gooey mouse follow CSS Codes
  4. Gooey mouse follow JS Codes

How do I make an gooey mouse follow?

The gooey effect is so funny~. What is a gooey mouse follow? How do you make a gooey mouse follow? This script and codes were developed by Keyon on 10 January 2023, Tuesday.

Gooey mouse follow Previews
IQ Test

Gooey mouse follow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gooey mouse follow</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="blobs"> <div class="blob four move"></div> <div class="norm blob one"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> <feBlend in="SourceGraphic" in2="goo" />	</filter> </defs>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Gooey mouse follow - Script Codes CSS Codes

body { margin: 0px; background: #ECEFF1; -webkit-backface-visibility: hidden;
}
.blob { position: fixed; background: #42A5F5; background-size: 1000% 1000%; top: 50%; width: 100px; height: 100px; line-height: 100px; text-align: center; color: white; font-size: 40px; border-radius: 100%; margin-top: -50px; margin-left: -50px;
}
.blobs { filter: url("#goo"); position: fixed; left: calc(50vw - 250px); top: calc(50vh - 250px); width: 500px; height: 500px; background: transparent; border: 3px solid; border-color: transparent;
}
.one { left: 50%; filter: blur(15px);
}
.four { filter: blur(20px); position: fixed; background: rgba(77, 208, 225, 0.7) !important; left: calc(var(--mouse-x) * 0.27px); top: calc(var(--mouse-y) * 0.27px); margin-left: calc(50vw - 120px); margin-top: calc(50vh - 120px); opacity: 0; transition: opacity 0.3s ease; z-index: 5;
}
.vsfr { opacity: 1 !important;
}

Gooey mouse follow - Script Codes JS Codes

var docStyle = document.documentElement.style;
$('.blobs').mousemove(function(e) { var offset = $(this).offset(); docStyle.setProperty('--mouse-x', e.pageX - offset.left); docStyle.setProperty('--mouse-y', e.pageY - offset.top);
});
$('.blobs').mouseleave(function(){ $('.four').removeClass('vsfr');
});
$('.blobs').mouseenter(function() { $('.four').addClass('vsfr');
});
Gooey mouse follow - Script Codes
Gooey mouse follow - Script Codes
Home Page Home
Developer Keyon
Username Keyon
Uploaded January 10, 2023
Rating 3
Size 2,876 Kb
Views 4,048
Do you need developer help for Gooey mouse follow?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keyon (Keyon) Script Codes
Name
Presentation - Material Design and Parallax
Marco, the angry rectangle
Play of the Game
Switch Logo
Zelda Breath of the Wild Cartridge
The IT Crowd Window
Simple Login
Profile Box
Polaroid Snap Realistic
Materoid
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!