Mouse Trailing
How do I make an mouse trailing?
Like it's 1992. What is a mouse trailing? How do you make a mouse trailing? This script and codes were developed by John Urbank on 08 July 2022, Friday.
Mouse Trailing - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mouse Trailing</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { width: 100%; height: 100%; overflow: hidden; background: #f8769f;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id='canvas'></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Mouse Trailing - Script Codes CSS Codes
html, body { width: 100%; height: 100%; overflow: hidden; background: #f8769f;
}
Mouse Trailing - Script Codes JS Codes
var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), W = window.innerWidth, H = window.innerHeight;
canvas.width = W;
canvas.height = H;
//helps prevent skewing and canvas resizing
window.onresize = function(event) { W = window.innerWidth, H = window.innerHeight; canvas.width = W; canvas.height = H;
}
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousemove', onMouseStop, false);
canvas.addEventListener("touchmove", onTouch, true);
canvas.addEventListener('touchmove', onMouseStop, false);
var shapes = [];
var mouse = {}, mouseMove = true, mouseStop = true, hasStopped = false, hasChanged = false;
var timeout;
var rePaint = function() { var grdBg = ctx.createLinearGradient(0, 0, W, H); grdBg.addColorStop(0, 'rgba(247, 81, 135, 0.6)'); grdBg.addColorStop(1, 'rgba(248, 129, 167, 0.6)'); ctx.fillStyle = grdBg; ctx.fillRect(0, 0, W, H);
}
function Shape() { this.x; this.y; this.radius = 3; this.randNum; this.randPos = function() { var randi = Math.floor(Math.random() * 100 + 1); return randi; }; this.randColor = function() { var color = Math.floor(Math.random() * 255 + 1); return color; }; this.placeTriangle = function() { ctx.moveTo(this.x + this.randPos(), this.y + this.randPos()); ctx.lineTo(this.x + this.randPos(), this.y + this.randPos()); ctx.lineTo(this.x + this.randPos(), this.y + this.randPos()); }; this.triangle = function(option) { var grd = ctx.createLinearGradient(0, 0, W, H); //solid / gradient ctx.beginPath(); this.placeTriangle(); ctx.shadowBlur = 15; grd.addColorStop(0, '#3ea1ab'); grd.addColorStop(0.50, '#e1acaa'); grd.addColorStop(1, '#456085'); ctx.fillStyle = grd; ctx.fill(); ctx.shadowColor="#e44b7d"; ctx.shadowBlur = 10; ctx.closePath(); //stroked ctx.beginPath(); this.placeTriangle(); ctx.closePath(); ctx.lineWidth = 1; ctx.strokeStyle = "#fff"; ctx.stroke(); //solid white ctx.beginPath(); this.placeTriangle(); grd = ctx.createLinearGradient(0, 0, W, H); ctx.fillStyle = "#fff"; ctx.fill(); ctx.closePath(); }; this.draw = function() { this.triangle() };
};
var update = function () { rePaint(); shapes.push(new Shape()); for(i=0; i<shapes.length; i++) { //first item s1 = shapes[i]; //second item s2 = shapes[i - 1]; //attach Shape to mouse if(mouse.x && mouse.y) { shapes[shapes.length - 1].x = mouse.x; shapes[shapes.length - 1].y = mouse.y; s1.draw(); } //velocity if(i > 0) { s2.x += (s1.x - s2.x) * 0.7; s2.y += (s1.y - s2.y) * 0.7; } if(hasStopped) { shapes.pop(); } } //remove from array if (shapes.length > 8) { shapes.pop(); }
};
//check mouse movement
function onMouseMove(e) { hasStopped = false; hasChanged = true; mouse.x = e.pageX - 50; mouse.y = e.pageY - 50;
};
function onTouch(e) { hasStopped = false; hasChanged = true; e.preventDefault(); mouse.x = e.targetTouches[0].pageX - 50; mouse.y = e.targetTouches[0].pageY - 50;
};
var stopped = function() { hasChanged = false; hasStopped = true;
};
function onMouseStop() { clearTimeout(timeout); timeout = setTimeout( stopped , 50);
};
//loop
var interval = setInterval(update, 100);
Developer | John Urbank |
Username | jurbank |
Uploaded | July 08, 2022 |
Rating | 4.5 |
Size | 3,268 Kb |
Views | 89,056 |
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!
Name | Size |
Canvas Geometry | 2,242 Kb |
CSS Loading Animation | 3,495 Kb |
WebGL Minimalism | 2,940 Kb |
Navicon - responsive nav pattern | 3,469 Kb |
A Pen by John Urbank | 2,984 Kb |
Hamburger subtract | 2,767 Kb |
Lego style loading text | 5,209 Kb |
Simple jQuery Slider | 2,874 Kb |
Diagonal CSS Pattern | 1,790 Kb |
Basic motion with JavaScript | 2,202 Kb |
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!
Name | Username | Size |
Display properties | Hamzaerbay | 1,886 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
React TODO | Enieste | 3,320 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Easing | GreenSock | 2,043 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!