Текстовые сцены с применением анимации CSS | RUDEBOXВ данном уроке мы рассмотрим как реализовать красивую смену текста с эффектами плавного перехода и фокусировки, кроме этого текст будет изменять размеры, это будет создать иллюзию растворения и полета текста. Все что нам понадобится это только трансформации css, фильтры и прочие фишки. Следует отметить, что данный урок это просто эксперимент, мы пытаемся показать все возможности работы со стилями, по этому кроссбраузерности не всегда получается добиться. И так, давайте посмотрим, что у нас получилось.

Шаг 1. HTML

Для начала нам понадобится набор текста, который будет последовательно появляться:

Теперь давайте поместим каждую букву в отдельный span элемент. Сделаем это динамически, с помощью jQuery:

Теперь нам нужно применить код указанный выше:

Мы будем использовать небольшой скрипт lettering.js. Также, в перспективе, мы хотим, чтобы буквы несколько поворачивались.

Текстовые сцены с применением анимации CSS | RUDEBOX

Шаг 2. CSS

Обратите внимание, что префиксы убраны, по этому полный код можно просмотреть в исходниках. И так, нам необходимо, чтобы текст занимал всю ширину монитора:

Также мы хотим, чтобы наши фразы были расположены в центре относительно всех сторон. Для этого мы будем использовать свойство flexbox:

Добавим небольшое расстояние между словами:

Необходимо добавить опцию перспективы для первой буквы:

Изначально все буквы будут прозрачными. Анимация будет длиться 5.2 секунды:

Первые предложения будут сменяться медленнее, а последние — быстрее:

Также буквы будут повёрнуты по оси Y. Также поиграемся с чёткостью букв:

Для последнего предложения зададим другую анимацию:

Также сделаем некоторые слова жирным шрифтом:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: