How can I position an image element so it follows above the cursor?

Question

so i'm trying to do something oddly specific, i was asked to make a website for someone as a little gag and i'm wondering if this can be achieved with javascript/css, can you position this image so it appears above the cursor at a specific position? i want the luigi gif to appear over the goomba so it looks like its being stepped on. i've tried multiple things but anything i try breaks it. I'm a beginner in javascript! It's way harder for me than HTML and CSS.

function moveImg(event) { var x = event.clientX; var y = event.clientY; var luigi = document.getElementById("luigi"); luigi.style.left = x+'px'; luigi.style.top = y+'px'; }

html { cursor: url("https://cdn.discordapp.com/attachments/975528286711078942/981315329357676585/goomber.gif"), auto; padding: 0; margin: 0; } body { background-image: url(https://cdn.discordapp.com/attachments/975528286711078942/981314082114269294/fire.gif); margin:0px; padding:0px; font-family: 'Roboto', sans-serif;\ position: relative; height: 100vh; } div { width: 100%; height: 100%; border: none; } #header { } img { position: absolute; object-position: x y; }

<html> <head> <style> </style> </head> <body> <center> <img style="pointer-events:none;user-select:none;" src="https://cdn.discordapp.com/attachments/975528286711078942/981314061809647706/killhim.gif"> </center> <br> <div onmousemove="moveImg(event)"> <img id="luigi" src='https://cdn.discordapp.com/attachments/975528286711078942/981314102783799296/weegeestomp.gif'> </div> <script></script> </body> </html>

An image of how it looks

an image of how it looks

You can apply hover to a element and change cursor at that point. — Grumpy
– Grumpy, Commented Jun 1, 2022 at 7:01

Sencer Arslan · Accepted Answer · 2022-06-01 07:50:07Z

var cursor = $(".cursor"), follower = $(".cursor-follower"); var posX = 0, posY = 0; var mouseX = 0, mouseY = 0; TweenMax.to({}, 0.016, { repeat: -1, onRepeat: function() { posX += (mouseX - posX) / 9; posY += (mouseY - posY) / 9; TweenMax.set(follower, { css: { left: posX - 12, top: posY - 12 } }); TweenMax.set(cursor, { css: { left: mouseX, top: mouseY } }); } }); $(document).on("mousemove", function(e) { mouseX = e.clientX; mouseY = e.clientY; }); $(".link").on("mouseenter", function() { cursor.addClass("active"); follower.addClass("active"); }); $(".link").on("mouseleave", function() { cursor.removeClass("active"); follower.removeClass("active"); });

body { width: 100%; height: 100vh; background-image: linear-gradient(to top, #007adf 0%, #00ecbc 100%); font-family: sans-serif; overflow: hidden; cursor: none; } .cursor { position: absolute; background-image:url('https://cdn.discordapp.com/attachments/975528286711078942/981315329357676585/goomber.gif'); background-size:contain; background-repeat:no-repeat; width: 40px; height: 40px; z-index: 1; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; user-select: none; pointer-events: none; z-index: 10000; transform: scale(1); &.active { opacity: 0.5; transform: scale(0); } &.hovered { opacity: 0.08; } } .cursor-follower { position: absolute; background-image:url('https://cdn.discordapp.com/attachments/975528286711078942/981314102783799296/weegeestomp.gif'); background-size:contain; background-repeat:no-repeat; width:100px; height:200px; z-index: 2; user-select: none; pointer-events: none; z-index: 10000; transform: translate(0, -90px); &.active { opacity: 0.7; transform: scale(3); } &.hovered { opacity: 0.08; } } a { text-decoration: none; text-transform: uppercase; color: white; font-size: 11px; letter-spacing: 1px; } .link-list { position: absolute; bottom: 0; left: 0; list-style: none; &__item { display: inline-block; } }

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="cursor"></div> <div class="cursor-follower"></div> <ul class="link-list"> <li class="link-list__item"> <a href="#" class="link">Hover me</a> </li> </ul>

Collectives™ on Stack Overflow

How can I position an image element so it follows above the cursor?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related