На одном из сайтов наткнулся на залипательный эффект — линия, которая идет за курсором. Я просто изучал сайт и на минуту залип на этом эффекте, рисуя что-то.
Ниже скрипт и инструкция, как подключить такое себе.
Демо
Шаг 1: Подключение к странице
Есть два способа добавить эффект на ваш сайт:
Способ 1: Подключение отдельного файла
- Скопируйте код и создайте файл
cursor-trail.jsв папке вашего проекта (например, вjs/). - Добавьте его в ваш HTML-файл перед закрывающим тегом
</body>:
<body>
<!-- Ваш контент -->
<script src="js/cursor-trail.js"></script>
</body>
Способ 2: Встраивание кода в HTML
Если вы не хотите использовать отдельный файл, можно встроить код прямо в HTML, указан полный код:
<body>
<!-- Ваш контент -->
<script>
document.addEventListener("DOMContentLoaded",()=>{
// Настройки эффекта - удобно редактировать
const trailSettings = {
color: "rgba(255, 255, 255, 0.85)", // Цвет линии
thickness: 1, // Толщина линии
maxSegments: 40, // Максимальное количество сегментов
minDistance: 3, // Минимальное расстояние между точками
fadeFactor: .95, // Фактор затухания
inactivityTimeout: 5000 // Время бездействия до исчезновения (мс)
};
// Минифицированный код (не редактировать)
let s=[],x=null,y=null,f=!0,t=null;function h(){s.length>0&&(s.forEach((e,i)=>{setTimeout(()=>{e.style.opacity="0"},50*i)}),setTimeout(()=>{s.forEach(e=>e.remove()),s.length=0},50*s.length+300))}function r(){t&&clearTimeout(t),t=setTimeout(h,trailSettings.inactivityTimeout)}function c(e,i,n,o){const a=document.createElement("div");a.classList.add("trail-segment");const l=Math.sqrt(Math.pow(n-e,2)+Math.pow(o-i,2)),d=180*Math.atan2(o-i,n-e)/Math.PI;if(a.style.width=`${l}px`,a.style.height=`${trailSettings.thickness}px`,a.style.left=`${e}px`,a.style.top=`${i}px`,a.style.transform=`rotate(${d}deg)`,a.style.transformOrigin="0 0",a.style.backgroundColor=trailSettings.color,a.style.position="fixed",a.style.pointerEvents="none",a.style.zIndex="9998",a.style.borderRadius="0px",a.style.opacity="1",a.style.transition="opacity 0.3s",document.body.appendChild(a),s.push(a),s.length>trailSettings.maxSegments){const e=s.shift();e.style.opacity="0",setTimeout(()=>{e.remove()},300)}s.forEach((e,t)=>{e.style.opacity=(t+1)/s.length})}document.addEventListener("mousemove",e=>{if(r(),f)return x=e.clientX,y=e.clientY,void(f=!1);if(null===x||null===y)return x=e.clientX,void(y=e.clientY);const t=e.clientX-x,i=e.clientY-y,n=Math.sqrt(t*t+i*i);n>trailSettings.minDistance&&(c(x,y,e.clientX,e.clientY),x=e.clientX,y=e.clientY)}),r()});
</script>
</body>Шаг 2: Настройка эффекта
Откройте cursor-trail.js (или найдите встроенный код в HTML) и найдите найстройки скрипта:
const trailSettings = {
color: "rgba(255, 255, 255, 0.85)", // Цвет линии
thickness: 1, // Толщина линии
maxSegments: 40, // Максимальное количество сегментов
minDistance: 3, // Минимальное расстояние между точками
fadeFactor: .95, // Фактор затухания
inactivityTimeout: 5000 // Время бездействия до исчезновения (мс)
};Что означают параметры:
color: Цвет линии в формате CSS (HEX, RGB, RGBA).thickness: Толщина линии в пикселях.maxSegments: Сколько сегментов может быть в линии (влияет на длину следа).minDistance: На каком расстоянии добавляется новый сегмент (меньше — плавнее, больше — проще для браузера).fadeFactor: Фактор затухания для плавного исчезновения (чем ближе к 1, тем медленнее затухание).inactivityTimeout: Время в миллисекундах, после которого след исчезнет, если курсор не двигается (5000 = 5 секунд).
Как настроить под себя:
- Для тонкой и короткой линии: уменьшите
thicknessдо 0.5 иmaxSegmentsдо 20−30. - Для длинного хвоста: увеличьте
maxSegmentsдо 100−150. - Для более заметного следа: используйте яркий цвет, например
«#00ff00»(зеленый) или«rgba (0, 128, 255, 0.9)»(голубой). - Для более быстрого затухания при бездействии: уменьшите
inactivityTimeoutдо 3000 (3 секунды). - Если сайт тормозит: увеличьте
minDistanceи уменьшитеmaxSegments.
Особенности эффекта
Наш эффект следа за курсором имеет несколько важных особенностей:
- Плавное затухание с конца: Старые сегменты постепенно исчезают, создавая эффект «хвоста».
- Автоматическое исчезновение: Если курсор не двигается 5 секунд, след плавно исчезает.
- Адаптивность: Сегменты динамически создаются в зависимости от скорости и траектории движения курсора.
- Оптимизация: Используется оптимальное количество элементов для плавного эффекта без перегрузки браузера.
- Простая настройка: Все параметры эффекта легко настраиваются через один объект с настройками.
Итог
Теперь у вас есть эффект следа за курсором с автоматическим затуханием! Это небольшое дополнение может сделать сайт более живым и интерактивным. Экспериментируйте с настройками, чтобы добиться нужного результата для вашего дизайна.
Если есть вопросы, пишите в комментариях!
