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

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

В этой статье мы разберём код простой css-анимации, которая отлично подойдёт для заголовков. Такая анимация обычно используется на веб-сайтах, чтобы выделить элемент пользовательского интерфейса, в нашем случае — заголовок, не отвлекая посетителя от основного контента.

See the Pen Untitled by kolpinski (@kolpinski) on CodePen.

Для повторного запуска анимации нажмите rerun в правом нижнем углу блока CodePen

Html

  <div class="container">
    <h2 class="text-cutout">Kolpinski.ru</h2>
  </div>

Как вы можете видеть, у данного примера html код очень простой, и состоит всего из одного блока с классом "container" в котором находится заголовок h2 с классом "text-cutout"

Css

Для начала импортируем шрифт ‘Roboto’ с google fonts, и пропишем начальные стили для всех элементов (*), то есть уберём дефолтные margin и padding. А так же пропишем значение border-box для свойства box-sizing.

1
2
3
4
5
6
7
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
 
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

После чего займёмся контейнером в котором вся магия и происходит.
Установим ему высоту [height] в 100vh — то есть, что бы он занимал всю высоту экрана. Далее пропишем значения для заднего фона [background]. Что бы не раздувать код, и не прописывать для бэкграунда отдельно все его значения (size, repeat, position) я использую сокращённое написание всех этих значений.

Что бы у нас внутри контейнера всё было строго по центру, устанавливаем для него display: flex,
justify-content: center и align-items: center. Короче, выставляем всё по центру.

Кстати, для бэкграунда контейнера вы можете использовать абсолютно любое изображение, какое вам больше нравится. Только не забудьте правильно прописать для него значение url(‘…’) .

8
9
10
11
12
13
14
.container {
  height: 100vh;
  background: url("https://vk.sv/QIEdpU") no-repeat center center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

Пишем стили для заголовка

Устанавливаем для заголовка цвет заднего фона, в нашем случае это белый — background-color: #fff;. Далее идёт свойство mix-blend-mode (режим наложения) со значением screen. Вот как раз это значение и делает заголовок прозрачным. Ну а потом уже всё просто. Выставляем внутренние отступы (padding) и прописываем стили для шрифта. В данном примере шрифт у нас — Montserrat, размер шрифта — 80px, жирность (насыщенность) — 900, и все буквы заглавные.

И последней строчкой в этом блоке у нас идут значения свойства animation. Для экономии времени и сокращения количества строчек кода, это свойство я тоже прописываю в сокращённом формате.

Сначала у нас идёт имя анимации (scale-in-hor-left), далее указываем длительность — 0.9 секунд. Далее следует, на первый взгляд, страшная последовательность букв и цифр. Но это всего лишь значение свойства animation-timing-function. После чего идёт animation-delay т.е задержка анимации — 0.6 секунд. Ну и последним идёт значение свойств animation-fill-mode, и оно у нас — both

15
16
17
18
19
20
21
22
23
24
.text-cutout {
  background-color: #fff;
  mix-blend-mode: screen;
  padding: 0.1em 0.8em;
  font-family: "Montserrat";
  font-size: 80px;
  font-weight: 900;
  text-transform: uppercase;
  animation: scale-in-hor-left 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}

Анимация

В последнем блоке мы прописываем как будет происходить сама анимация.
После ключевого слова @keyframes мы должны указать название анимации, то есть то, которое мы указывали в предыдущем блоке для класса text-cutout.

0% — это состояние элементов на начало анимации, а 100% — соответственно состояние по её окончанию.

25
26
27
28
29
30
31
32
33
34
35
36
@keyframes scale-in-hor-left {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

Ну и здесь, на самом деле, всё очень просто.
В начале анимации мы указываем трансформацию scaleX(0) — то есть сначала текст будет полностью уменьшен по оси Х, и его не будет видно. А на конец анимации выставляем scaleX(1) — значение свойства по умолчанию. И объект к которому была применена такая трансформация — возвращается к своему исходному размеру.


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