Интересный эффект анимации текста с помощью CSS3 RUDEBOXЯ не раз уже утверждал, что типографика на сайте является одним с важнейших элементов на сайте. Правильно подобранная стратегия соотношения шрифта и цвета позитивно влияет на посетителей. Кроме этого, в последнее время, стали популярны различные авторские шрифты, которые придают сайту особую изюминку. В данном уроке мы рассмотрим процесс создания анимации для фона в тексте. Другими словами, мы будем проводить эксперименты со свойством clip text. Получилось достаточно привлекательно.


Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

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

Шаг 1. HTML

Мы будем использовать достаточно простую разметку, с заголовком текста h3.

Для анимации мы будем использовать класс “it-animate”.

Пример 1

Интересный эффект анимации текста с помощью CSS3 RUDEBOX

В первом примере мы хотим добавить два фоновых изображений. Изначально на необходимо, чтобы изображение, заполнило все слова, поэтому мы установим фон размере 100%.  Это означает, что изображение сохранит свои пропорции.

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

Далее нам необходимо добавить тени, и небольшие переходи анимации изображения:

С этим примером закончили. Переходим к следующему.

Пример 2

Интересный эффект анимации текста с помощью CSS3 RUDEBOX

В данном примере мы будем экспериментировать с градиентами. Первое изображение фона линейный градиент с большим количеством цветов, а вторая представляет собой повторяющийся линейный градиент с полосками.

Фона размер для градиентов будет в три раза больше наших слоев в длину и высоту.

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

Для Firefox мы будем анимировать тени в соответствии с цветом текста.

Пример 3

Интересный эффект анимации текста с помощью CSS3 RUDEBOX

В данном примере мы ходим изменять позицию фонового изображения. Что позволит нам наблюдать плавную анимацию и приятный движущийся фон.

Мы также изменить уровень прозрачности значения RGBA, а также добавить некоторые переходы теней для Firefox:

Надеюсь вам понравился данный эксперимент с фоном текста. И вы найдете вдохновение для своих работ.

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

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