Large canvas mousemove experiment
How do I make an large canvas mousemove experiment?
Pointless perhaps - large image canvas moves with mouse.. What is a large canvas mousemove experiment? How do you make a large canvas mousemove experiment? This script and codes were developed by Joseph on 21 November 2022, Monday.
Large canvas mousemove experiment - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>large canvas mousemove experiment</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div id="info"></div> <img id="thumbnail" src=""> <img id="picture" src="https://corecanvas.s3.amazonaws.com/theonering-0188db0e/gallery/original/war_in_middle_earth_map.jpg" width="300px" height="auto">
</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>
Large canvas mousemove experiment - Script Codes CSS Codes
html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; cursor:crosshair;
}
/* Hide the scrollbar... */
body::-webkit-scrollbar { display: none; }
#follower { position : absolute; z-index:3; background-color : yellow; width:100px; height:100px; border-radius:100%; margin-left:-50px; margin-top:-50px; }
#picture { position:absolute; z-index:0; -webkit-transform: translate3d(0px,0px,0px); transform: translate3d(0px,0px,0px); }
#thumbnail { position:fixed; top:25px; left:25px; z-index:999; width:300px; height:auto; }
.container
{ width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; border:1px solid #000000;
}
#info { position:fixed; top:25px; left:25px; z-index:99; font-size:1em; color:purple; visibility:visibile; }
Large canvas mousemove experiment - Script Codes JS Codes
$.global = new Object();
$.global.x= 0;
$.global.y = 0;
$.global.windowwidth = 0;
$.global.windowheight = 0;
$.global.halfheight = 0;
$.global.pictureheight = 0;
$.global.finalX = 0;
$.global.finalY = 0;
$.global.theX = 0;
$.global.theY = 0;
$.global.half = 0;
$.global.overlap = 0;
$.global.percent = 0;
$(document).ready(function()
{ var $windowheight = $(window).height(); $.global.windowwidth = $(window).width(); $.global.windowheight = $windowheight; $.global.heightpercentage = $windowheight/25; var $widthadj = $.global.windowwidth * 3; $('#picture').width($widthadj); $('#picture').css('left','-'+ $.global.windowwidth +'px'); var mouseX = 0, mouseY = 0; setTimeout(function() { CalculateHeight(); }, 1000);
$(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; var $halfwidth = $.global.windowwidth / 2; var $halfheight = $.global.windowheight / 2; var $finalX = mouseX - $halfwidth; var $finalY = mouseY - $halfheight; $.global.theX = $finalX; $.global.theY = $finalY; $.global.halfheight = $halfheight/2; $.global.percent = $finalY / $halfheight; $("#info").text("X: " + $finalX + ", Y: " + $finalY + ' - ' + $.global.percent + ',' + $.global.halfheight );
});
// cache the selector
var follower = $("#follower");
var picture = $("#picture");
var xp = 0, yp = 0;
var loop = setInterval(function(){ // change 12 to alter damping higher is slower xp += ($.global.theX - xp) / 12; yp += ($.global.percent - yp) / 12; var $another = $.global.overlap; var $shit = yp * $another; follower.css({left:xp, top:yp}); picture.css('transform','translate3d(' + xp*-2 + 'px,' + $shit*-1 +'px,0px)');
}, 30);
});
function CalculateHeight() { var $actualheight = $('#picture').height(); $.global.pictureheight = $actualheight; var $halfpictureheight = $actualheight/2; var $halfwindowheight = $.global.windowheight/2; var $finalheightadj = $halfpictureheight - $halfwindowheight; $.global.overlap = $finalheightadj; $('#picture').css('top','-'+ $finalheightadj +'px'); $.global.heightpercent = $halfwindowheight/100; }
Developer | Joseph |
Username | jibbon |
Uploaded | November 21, 2022 |
Rating | 3 |
Size | 2,885 Kb |
Views | 22,264 |
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 |
Fluid full-width vimeo element | 2,242 Kb |
Fluid poster wall | 2,856 Kb |
Simple responsive fullscreen slider | 2,997 Kb |
NEW SPACE COLONY | 2,681 Kb |
Bloody Simple Grid | 2,195 Kb |
Dragdealer slider | 3,117 Kb |
Css only parallax | 5,628 Kb |
3d transform card flip | 2,276 Kb |
A Pen by Joseph | 1,826 Kb |
NEW SPACE COLONY - safe | 2,150 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 |
NgEasyModal | Lorenzodianni | 4,159 Kb |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
404 Error Page | WebSonick | 3,203 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
Countdown with Rings | Ewganoel | 2,490 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!