Главная » Кнопки с двигающимся за курсором узорчатым SVG-фоном

Кнопки с двигающимся за курсором узорчатым SVG-фоном


12.07.2021, 17:21

При наведении курсора на кнопку её фон движется за курсором в разных направлениях

Демо

HTML

Код

  <button class="button">
  <div class="pattern">
  <div class="target inner bg1"></div>
  </div>
  <div class="text">Hover me I'm brilliant</div>
  </button>

  <button class="button">
  <div class="pattern">
  <div class="target inner bg2"></div>
  </div>
  <div class="text">Hover me I'm magnificent</div>
  </button>

  <button class="button">
  <div class="pattern">
  <div class="target inner bg3"></div>
  </div>
  <div class="text">Hover me I'm stupendous</div>
  </button>

  <button class="button">
  <div class="pattern">
  <div class="target inner bg4"></div>
  </div>
  <div class="text">Hover me I'm remarkable</div>
  </button>

CSS

Смотреть CSS-стили

JS

Код

const buttons = document.querySelectorAll('.button');
buttons.forEach((button) => {
  let target = button.querySelector('.target');
  function handleMove(e) {
  const x = -50 + (e.pageX - button.offsetLeft - 300 / 2) / 3;
  const y = -10 + (e.pageY - button.offsetTop - 100 / 2) / 3;

  target.style.setProperty('--x', `${ x }px`)
  target.style.setProperty('--y', `${ y }px`)
  }
  button.addEventListener('mousemove', (e) => {
  handleMove(e);
  });
  button.addEventListener('touchmove', (e) => {
  handleMove(e.changedTouches[0]);
  });
});

Источник

КОММЕНТАРИИ (0)

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]