Меню
E-mail
Контакты
Эффект следа
из текста
Модификаторы
Модификация позволяет создать эффект следа текста во время движения курсора мыши
Описание
Инструкция по подключению
Создаём T123 блок и помещаем в него стили и скрипт
Шаг 1
<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>
В Zero блоке создаём нужный текст и выравниваем его по верхнему левому краю. Container меняем на window
Шаг 2
Добавляем тексту класс text-trail
Шаг 3
Копируем текст необходимое количество раз (след за основным текстом)
Шаг 4
В стилях можно изменить цвет обводки. -webkit-text-stroke: 1px #dfe837;
Шаг 5
Другие модификации
Открой неограниченный доступ к библиотеке
Техническая поддержка в течение 12 часов
Платный доступ
Доступ к базовым и уникальным модификациям
Доступ к базовым и углубленым занятиям
2 уникальные модификации в неделю
350 руб. / в месяц
После оплаты подписки ты получишь доступ не только к этой модификации, но и ко всему платному контенту на платформе
