Как сделать эффект следа за курсором с картинками в конструкторе Craftum

Недавно мне захотелось оживить сайт на Craftum и добавить немного «магии». Вдохновился проектом ugly.cash, где курсор оставляет после себя шлейф из картинок, которые постепенно исчезают. В этой статье расскажу, как я реализовал похожий эффект у себя — шаг за шагом.

Идея эффекта

Когда пользователь двигает курсор по экрану:

• в точке его движения появляется картинка,

• она немного смещается и увеличивается,

• через заданное время плавно исчезает.

Если двигать мышь быстро, создаётся красивый «шлейф».

Подготовка

1. Подготовил набор картинок (лучше лёгкие PNG или WebP).

2. Задал для блока position: relative;, чтобы можно было точно позиционировать появляющиеся элементы.

3. Создал контейнер div, куда будут добавляться временные картинки.

<style>
.trail-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}
.trail-img {
  position: absolute;
  width: 150px;   /* ширина картинки */
  height: 112px;  /* высота картинки */
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  opacity: 1;
  transform: scale(1);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), 
              opacity 700ms linear;
}
</style>

и

<script>
const imgs = [
  'https://favicon.kz/pic/1.png',
  'https://favicon.kz/pic/2.png',
  'https://favicon.kz/pic/3.png'
  // можно добавить больше картинок
];

const blocks = [
  'n-ae023a35-8a38-4fbb-99c6-0b66d96f0175',
  'n-debd6001-e644-4f45-b280-f47d31045bb5'
];

blocks.forEach(id => {
  const block = document.getElementById(id);
  if (!block) return;

  const root = document.createElement('div');
  root.className = 'trail-root';
  block.style.position = 'relative';
  block.appendChild(root);

  block.addEventListener('mousemove', e => {
    const rect = block.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const img = document.createElement('img');
    img.src = imgs[Math.floor(Math.random() * imgs.length)];
    img.className = 'trail-img';
    img.style.left = (x - 75) + 'px'; // половина ширины
    img.style.top  = (y - 56) + 'px'; // половина высоты
    root.appendChild(img);

    // через 1.5 секунды запускаем анимацию исчезновения
    setTimeout(() => {
      const dx = (Math.random() - 0.5) * 40;
      const dy = (Math.random() - 0.5) * 40;
      const scale = 1.2; // увеличение перед исчезновением
      img.style.transform = `translate(${dx}px,${dy}px) scale(${scale})`;
      img.style.opacity = '0';
    }, 1500);

    img.addEventListener('transitionend', () => {
      img.remove();
    }, { once: true });
  });
});
</script>

Как настроить под себя

• Размер картинок — меняется в CSS (width и height).

• Позиция — смещение в JS (x - половина ширины, y - половина высоты).

• Скорость исчезновения — в transition (например, 1500ms).

• Задержка перед исчезновением — в setTimeout.

• Эффект увеличения/уменьшения — меняется параметр scale.

• Частота появления — можно добавить ограничение по времени или по расстоянию курсора.

Эффект получился простым и красивым. При движении мыши сайт оживает, а посетители получают немного «вау»-эффекта. Особенно интересно работает с набором разноцветных иконок. Таким образом любой может скопировать этот код, чтобы добавить такой эффект в свой проект и настроить под себя.

Мой Craftum тут.

Заходите в мой тг канал Дизайн дилетант, пишу о своих коммерческих проектах.