Question

0

353

Views

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

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

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-25T20:46:06.239Z

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>

0

353

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

1 answers

0

Find remote jobs

Andres GPT