Модификация позволяет создать эффект следа текста во время движения курсора мыши.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В Zero блоке создаём нужный текст и выравниваем его по верхнему левому краю. Container меняем на window
Шаг 1
Добавляем тексту класс text-trail
Шаг 2
Копируем текст необходимое количество раз (след за основным текстом)
Шаг 3
В стилях можно изменить цвет обводки. -webkit-text-stroke: 1px #dfe837;
Шаг 4
Чтобы убрать заливку у текста, нужно обратится к каждому элементу такого плана: .tn-elem__4194633161646163270683 .tn-atom
Шаг 5
Далее создаём блок T123 и помещаем в него скрипт (код поместить в конце страницы)
Шаг 6
<!--Эффект следа из текста-->
<!--https://mt-webdesign.ru/text-trail-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js" integrity="sha512-3WGIRFCuTpZhqYujwLp5RtARPkOy3uRtc3RXB31bJ9/i6VH2C66Z0WBV6gHhdhbUIDKFx8yTkLfEjdQM5Wl+ZQ==" crossorigin="anonymous"></script>
<div class="cursor"></div>
<script>
document.addEventListener("mousemove", e => {
gsap.to(".text-trail", {
x: e.clientX,
y: e.clientY,
stagger: -0.02
});
});
</script>
<style>
.text-trail {
position: absolute;
pointer-events: none;
/*-webkit-text-stroke: 1px rgb(255 255 255 / 50%);*/
-webkit-text-stroke: 1px #dfe837;
}
</style>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
