Cursor mouse test
How do I make an cursor mouse test?
What is a cursor mouse test? How do you make a cursor mouse test? This script and codes were developed by Ex HTML on 15 September 2022, Thursday.
Cursor mouse test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cursor mouse test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p id="curpos"></p>
<i class="cur cur1"></i>
<i class="cur cur2"></i>
<i class="cur cur3"></i>
<i class="cur cur4"></i>
<i class="cur cur5"></i> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Cursor mouse test - Script Codes CSS Codes
body { background:#333; color:#fff }
#curpos { font-size:70%; font-family:sans-serif;}
.cur { position:absolute; display:block; background:#0ff; width:40px; height:40px; border-radius:40px; /*transform-origin:-20px -20px;*/}
.cur1 {transition: all 0.1s ease-in-out; opacity:1}
.cur2 {transition: all 0.12s ease-in-out 0.01s; opacity:0.8}
.cur3 {transition: all 0.14s ease-in-out 0.02s; opacity:0.6}
.cur4 {transition: all 0.16s ease-in-out 0.03s; opacity:0.4}
.cur4 {transition: all 0.2s ease-in-out 0.03s; opacity:0.2}
Cursor mouse test - Script Codes JS Codes
var $cur = $('.cur'), bias = $cur.width(), $curpos = $('#curpos'), curX, curY, posX, posY;
//$cur.
$(window).on('mousemove', function(e) { curX = e.pageX; curY = e.pageY; posX = curX - bias; posY = curY - bias; $cur.css({"-webkit-transform":"translate("+posX+"px,"+posY+"px)"}); $curpos.html(bias + " : " + curX + ", " + curY + " / " + posX + " , " + posY);
});
Developer | Ex HTML |
Username | exhtml |
Uploaded | September 15, 2022 |
Rating | 3 |
Size | 1,972 Kb |
Views | 32,384 |
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 |
Formularios | 1,805 Kb |
Smooth Scroll | 1,567 Kb |
What The Flexbox | 2,320 Kb |
Slides-06-2 FLOATS | 1,744 Kb |
Boxed Layout | 2,160 Kb |
Slides-06-1 DISPLAY | 1,598 Kb |
Intramurs Typo | 2,065 Kb |
A Pen by Ex HTML | 1,497 Kb |
Parallax tests | 2,238 Kb |
Expanding panels onmouseover | 2,342 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 |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
RAQuote | Naderk007 | 4,412 Kb |
Super Discount | Orrinward | 3,225 Kb |
Slide In Panel | Vikvarg | 2,811 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
Tree growth tests | Orchard | 3,818 Kb |
Flickering Light Text Effect | Mandymichael | 3,315 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Simple Login Form Template | Banunn | 3,571 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!