Многие веб-сайты, особенно портфолио, используют эффект печати текста на машинке. Выглядит это действительно впечатляюще, и сегодня мы разберем, как воспроизвести такой эффект в своем проекте с помощью библиотеки Greensock (GSAP).
Подключение библиотеки GSAP
Для начала нужно подключить библиотеку gsap.min.js. Сделаем это самым быстрым и простым способом — через CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>Создание HTML-структуры
Теперь создадим какое-то предложение, например: «Это эффект печатной машинки». Поместим его между тегами <p>:
<p class="text-description type-me">Это эффект печатной машинки</p>Как вы заметили, абзацу присвоены CSS-классы type-me и text-description.
Стилизация текста с помощью CSS
Переходим к CSS:
body {
display: flex;
justify-content: center;
font-family: Courier, serif;
}
.text-description {
width: 702px;
overflow: hidden;
white-space: nowrap;
font-size: 3em;
}Ширина текста является очень важным параметром, так как от нее зависит JavaScript-анимация. Свойство width должно соответствовать ширине текста.
Анимация с помощью JavaScript
Переходим к JavaScript. Сперва мы создадим экземпляр класса TimelineMax:
const tl = new TimelineMax();Теперь создадим анимацию для tl:
tl.fromTo(".type-me", 5, {
width: "0",
}, {
width: "702px", /* ширина равна ширине абзаца */
}, 0);Для элемента с классом type-me мы устанавливаем ширину равной 0, а затем увеличиваем ее до 702 пикселей в течение пяти секунд. В результате мы получаем плавную анимацию увеличения ширины элемента за отведенный промежуток времени.
Добавление эффекта печатной машинки
Именно здесь на помощь приходит библиотека Greensock, которая позволяет разбить процесс на шаги, количество которых равно количеству символов в строке (включая знаки препинания и пробелы, так как мы симулируем работу печатной машинки):
tl.fromTo(".type-me", 5, {
width: "0",
}, {
width: "702px", /* ширина равна ширине абзаца */
ease: SteppedEase.config(24)
}, 0);Мы используем метод config объекта SteppedEase со значением 27, что равно количеству символов в строке.
Теперь у нас есть превосходный анимационный эффект печати на машинке.
Пример на CodePen
Вы можете увидеть пример на CodePen.
Заключение
Создание эффекта печатной машинки с помощью GSAP — это простой и эффективный способ добавить интерактивность и визуальный интерес к вашему веб-сайту. Используя возможности библиотеки Greensock, вы можете легко настроить и адаптировать анимацию под свои нужды.
