Mousy canvas experiment

Developer
Joseph
Size
2,076 Kb
Views
18,216
  1. Mousy canvas experiment Previews
  2. Mousy canvas experiment HTML Codes
  3. Mousy canvas experiment CSS Codes
  4. Mousy canvas experiment JS Codes

How do I make an mousy canvas experiment?

What is a mousy canvas experiment? How do you make a mousy canvas experiment? This script and codes were developed by Joseph on 21 November 2022, Monday.

Mousy canvas experiment Previews
IQ Test

Mousy canvas experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>mousy canvas experiment</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div id="follower"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mousy canvas experiment - Script Codes CSS Codes

html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
/* Hide the scrollbar... */
body::-webkit-scrollbar { display: none; }
#follower { position : absolute; background-color : yellow; width:100px; height:100px; border-radius:100%; margin-left:-50px; margin-top:-50px;
}
.container
{ width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; border:1px solid #000000;
}

Mousy canvas experiment - Script Codes JS Codes

$(document).ready(function()
{
var mouseX = 0, mouseY = 0;
$(window).mousemove(function(e) { var offset = $('.container').offset(); mouseX = Math.min(e.pageX - offset.left); mouseY = Math.min(e.pageY - offset.top); if (mouseX < 0) mouseX = 0; if (mouseY < 0) mouseY = 0;
});
// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){ // change 12 to alter damping higher is slower xp += (mouseX - xp) / 12; yp += (mouseY - yp) / 12; follower.css({left:xp, top:yp});
}, 12); });
Mousy canvas experiment - Script Codes
Mousy canvas experiment - Script Codes
Home Page Home
Developer Joseph
Username jibbon
Uploaded November 21, 2022
Rating 3
Size 2,076 Kb
Views 18,216
Do you need developer help for Mousy canvas experiment?

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!

Joseph (jibbon) Script Codes
Name
3d image canvas play
3d transform card flip
Fluid poster wall
Css only parallax
Dragdealer slider
Bloody Simple Grid
A Pen by Joseph
NEW SPACE COLONY
Large canvas mousemove experiment
Fluid full-width vimeo element
Create amazing captions 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!