Каталог
Эффект следа из текста
Пошаговая инструкция с подключением кода
Шаг 1
В Zero блоке создаём нужный текст и выравниваем его по верхнему левому краю. Container меняем на window
Шаг 2
Добавляем тексту класс text-trail
Шаг 3
Копируем текст необходимое количество раз (след за основным текстом)
Шаг 4
В стилях можно изменить цвет обводки. -webkit-text-stroke: 1px #dfe837;
Шаг 5
Чтобы убрать заливку у текста, нужно обратится к каждому элементу такого плана: .tn-elem__4194633161646163270683 .tn-atom
Шаг 5
В конце страницы или футере добавляем код, через блок T123
CSS / JS
<!--Эффект следа из текста-->
<!--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>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
Инструкция с копированием шаблона к себе
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (ID Шаблона), нажимаем кнопку «Выбрать»
Шаг 3
