Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animated mouse trail

I'm trying to build a mouse trail similar to this website. using javascript, jQuery or some other library. This is turning out to be harder than I thought. I specifically need help achieving that animated effect of the trail.

var container = document.getElementById("container");
var circle = document.querySelector(".circle");

TweenMax.set(circle, {
  scale: 0,
  xPercent: -50,
  yPercent: -50
});

container.addEventListener("pointerenter", function(e) {
  TweenMax.to(circle, 0.3, {
    scale: 1,
    opacity: 1
  });
  positionCircle(e);
});

container.addEventListener("pointerleave", function(e) {
  TweenMax.to(circle, 0.3, {
    scale: 0,
    opacity: 0
  });
  positionCircle(e);
});

container.addEventListener("pointermove", function(e) {
  positionCircle(e);
});

function positionCircle(e) {
  var rect = container.getBoundingClientRect();
  var relX = e.pageX - container.offsetLeft;
  var relY = e.pageY - container.offsetTop;

  TweenMax.to(circle, 0.3, {
    x: relX,
    y: relY
  });
}
body {
  background: #000;
  margin: 0;
  max-width: 100%;
  width: 100%;
  padding: 0;
}

.section {
  display: block;
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  background: #000;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 80%;
  backface-visibility: hidden;
  pointer-events: none;
  opacity: 1;
  box-shadow: 0 0 50px #fff
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="container" class="section">
  <div class="circle"></div>
</div>

My attempt so far is here

like image 551
Raul Avatar asked Sep 08 '26 16:09

Raul


1 Answers

I advice you, what are you seeing in that site is NOT A MOUSE TRAIL as you may think. It is an interaction between mouse movement (direction, velocity) that draws on underlying canvas that take the whole screen and it is drawn using a Three.js with a shader like this and a mask. Try to get your hands on Three.js or similar library to get a similar effect in easier e more performant way

like image 159
Mosè Raguzzini Avatar answered Sep 11 '26 05:09

Mosè Raguzzini