Mouse cursor following effect

В първият snippet за тази седмица (и за тази година) съм ви приготвила един забавен и интересен ефект, който прилагаме върху курсора на мишката.

Нека започнем с HTML markup-a:

<span id="circle" class="circle"></span>

Както виждаш, HTML-а ни е само един елемент, в случая аз съм използвала span, но може да се ползва и div. Подала съм му ID, за да може да го селектираме по-късно в JavaScript-a.

Минаваме към CSS-a, чрез който подаваме основни стилове на нашият circle елемент (в случая е кръг с прозрачност и border от 1px, може да промениш тези стилове):

  .circle {
      width: 30px;
      height: 30px;
      border: 1px solid #282828;
      border-radius: 50%;
      position: absolute;
      top: 500px;
      left: 500px;
      z-index: 6;
  }

И накрая – добавяме логиката с JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    var mouseX = 0;
    var mouseY = 0;
    var xp = 0; 
    var yp = 0;

    document.addEventListener('mousemove', function(e) {
        mouseX = e.pageX - 30;
        mouseY = e.pageY - 30;
    });

    setInterval(function() {
        xp += ((mouseX - xp) / 6);
        yp += ((mouseY - yp) / 6);
        document.getElementById('circle').style.left = xp + 'px';
        document.getElementById('circle').style.top = yp + 'px';
    }, 20);
});

При зареждане на страницата се инициализират координати за позицията на мишката и елемента. С помощта на eventListener „слушаме“ за mousemove, който актуализира координатите на мишката (mouseX, mouseY), като изваждането на 30 ги изместя леко от центъра. На всеки 20 милисекунди със setInterval се изчислява новата позиция на елемента чрез формула, която плавно приближава текущата позиция (xp, yp) към целевата (mouseX, mouseY). Позицията на елемента се актуализира чрез стиловите свойства left и top, създавайки ефект на плавно следене на мишката.

Финалният резултат може да видиш в CodePen:

Популярни уроци и статии