0
357
Views¿Cómo puedo colocar un elemento de imagen para que siga por encima del cursor?
así que estoy tratando de hacer algo extrañamente específico, me pidieron que hiciera un sitio web para alguien como una pequeña broma y me pregunto si esto se puede lograr con javascript/css, ¿puedes colocar esta imagen para que aparezca sobre el cursor? en un puesto especifico? quiero que el gif de luigi aparezca sobre el goomba para que parezca que lo están pisando. He intentado varias cosas, pero todo lo que intento lo rompe. ¡Soy un principiante en javascript! Es mucho más difícil para mí que HTML y 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: xy; } <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>Una imagen de como queda
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question