Лого www.SiteHere.ru

Анимация CSS — работа фотоаппарата

Анимированных элементов на странице становится всё больше. Многие размещают на своих сайтах Flash баннеры, но это не самый лучший выход. Потому что с развитием технологии CSS, мы можем создавать анимацию без использования JS и не прибегая в Flash. Это позволяет делать нам анимация CSS. Если Вы всё еще сомневаетесь в ее возможностях, тогда дочитайте до конца данную статью.

Как обычно, необходимо начинать изучение с самых азов. Рекомендую изучить принцип создания анимации CSS на простом примере. Вот данная статья:

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

Для начала взгляните на пример CSS анимации:

Посмотреть примерСкачать

Последний кадр анимации выглядит следующим образом:

Фотография в рамке

Анимация CSS — разбираем «по косточкам»

HTML часть анимации

HTML часть анимации

Начнём со структуры документа. Ничего дополнительно подключать не нужно. Только файл стилей, в котором у нас будет информация о ключевых кадрах. Вот весь код HTML:

HTML КОД
1
2
3
4
5
<div class="wrapper">
    <div class="photoBg">
        <div class="photoFlash"></div>
    </div>
</div>

Подробно пройдемся по каждому блоку:

  • Блок с классом wrapper — это контейнер, в котором находятся блок с изображением. Он необходим для поворота изображения и обрезания лишних частей при увеличении.
  • Блок с классом photoBg — этот блок содержит изображение на фоне.
  • Блок с классом photoFlash — блок, который нужен для анимации вспышки.

CSS часть анимации

CSS часть анимации

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

Начнём рассматривать с первого контейнера, в котором всё находится:

CSS КОД
1
2
3
4
5
6
7
8
9
.wrapper {
    margin-top:15%; /* Отступ сверху */
    width: 100%; /* Ширина контейнера занимает всю ширину блока-родителя */
    min-width: 800px; /* Ширина не должна становиться менее 800px */
    overflow: hidden;  /* Всё что за пределами этого блока - &#34;обрезаем&#34; */
    animation: rotateBlock 9s linear infinite; /* Задаем анимацию для этого блока */
    transform:rotate(-15deg); /* Поворачиваем на 15 градусов против часовой */
    border:30px solid #F28510; /* Граница для блока */
}

Я все свойства прокомментировал, но хочу подробнее рассмотреть вот это свойство:

CSS КОД
1
animation: rotateBlock 9s linear infinite;

Это свойство отвечает за анимацию и привязку ключевых кадров анимации CSS. Что значит каждое из этих значений:

  • rotateBlock — произвольное название ключевых кадров анимации (см. ниже).
  • 9s — длительность анимации.
  • linear — скорость изменения анимации.
  • infinite — количество повторений анимации. Infinite — бесконечно.

Перейдем к ключевым кадрам этой анимации. Анимацию мы назвали "rotateBlock", поэтому сейчас определим ключевые кадры анимации:

CSS КОД
1
2
3
4
5
6
@keyframes rotateBlock {
    0% {transform:rotate(0); border:0 solid #F28510;}
    62% {transform:rotate(0); background-position: -20px -120px; border:0 solid #F28510;}
    65% {transform:rotate(-15deg); border:30px double #F28510;}
    100% {transform:rotate(-15deg);}
}

Как видите, здесь у нас 4 ключевых кадра анимации CSS для этого блока. Давайте посмотрим что на каждом ключевом кадре происходит:

  • 0% — начало анимации, поэтому все свойства "сбрасываем" и видим блок без поворота и без рамки.
  • 62% — пока всё еще рано поворачивать и задавать границу, а немного смещаем фон.
  • 65% — поворачиваем блок на 15 градусов против часовой стрелки и добавляем границу.
  • 100% — указываем что до конца анимации блок должен быть под углом.

Мы рассмотрели основной блок. Давайте посмотрим на блок с изображением и то, что с этим изображением происходит:

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
.photoBg {
    background: url(../images/background-image.jpg) no-repeat; /* Адрес изображения */
    background-position: -20px -120px; /* Конечное положение фонового изображения */
    background-size: cover; /* Растягиваем фоновое изображение пропорционально блоку */
    width:100%; /* Блок по ширине растягивается на всю ширину блока-родителя */
    min-width: 600px; /* Минимальная ширина 600px */
    padding-bottom:50%; /* Маленькая хитрость: по высоте этот блок должен быть пропорционален изображению */
    position:relative; /* Необходимо для дальнейшего абсолютного позиционирования блока &#34;photoFlash&#34; */
    overflow: hidden; /* Обрезаем всё за пределами это блока, потому что изображение будет увеличиваться и смещаться */
    animation: scaleIn 9s linear infinite; /* Задаем анимацию */
    transform:scale(3); /* Конечное увеличение блока */
}

Всё также прокомментировано. Сейчас давайте посмотрим на ключевые кадры этой анимации:

CSS КОД
1
2
3
4
5
6
7
8
@keyframes scaleIn {
    0% {transform:scale(1);background-position: 0 0;}
    20% {transform:scale(2);background-position: 100px 20px;}
    40% {transform:scale(1.7);background-position: -50px -50px;}
    60% {transform:scale(3);background-position: -20px -120px;}
    90% {transform:scale(3);background-position: -20px -120px;}
    100% {transform:scale(3);background-position: -20px -120px;}
}

Всё построено на том, что блок иногда увеличивается и фоновое изображение смещается:

  • 0% — никакого смещения и увеличения нет.
  • 20% — смещаем на 100px вправо и на 20px вниз, а также увеличиваем.
  • 40% — смещаем на 50px влево и на 50px вверх, немного уменьшаем.
  • 60% — смещаем на 20px влево и на 120px вверх, увеличиваем.
  • 90% — оставляем то же положение (необязательно).
  • 100% — конечное положение.

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

CSS КОД
1
2
3
4
5
6
7
8
9
10
.photoFlash {
    position:absolute; /* Абсолютное позиционирование относительно блока-родителя (блок &#34;photoBg&#34;) */
    top:0; /* Расположение по вертикали - прижат к верху */
    left:0; /* Расположение по горизонтали - прижат к левой стороне */
    width: 100%; /* Ширина блока - на всю ширину блока-родителя */
    height: 100%; /* Высота блока - на всю высоту блока-родителя */
    background: #fff; /* Фон - белый цвет */
    animation: flashAnimation 9s linear infinite; /* Анимация вспышки */
    opacity: 0; /* Прозрачность */
}

А сейчас ключевые кадры:

CSS КОД
1
2
3
4
5
@keyframes flashAnimation {
    60% {opacity: 0}
    61% {opacity: 1}
    62% {opacity: 0}
}

Здесь блок должен появиться и пропасть. При этом всё это должно происходить достаточно быстро. Давайте посмотрим по ключевым кадрам:

  • 60% — прозрачность блока 0%, то есть его не видно.
  • 61% — прозрачность блока 100%. Он полностью появился.
  • 62% — прозрачность блока 0, то есть он опять пропадает.

Давайте посчитаем в секундах, за сколько происходит вспышка. Если вся анимация длится 9 секунд, а здесь всё происходит за 2%, то получаем 0.18 секунды. Быстро? Но это ведь вспышка… 🙂

Вывод

Интересная анимация получилось, правда? Это не flash, который может быть заблокирован плагинами в браузерах и загружается достаточно быстрее. Смотрится он также, как обычный Flash.

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

P.S. Баннер, который Вы видите ниже, над комментариями сделан на чистом CSS.

Успехов!

С Уважением, Юрий Немец

Анимация CSS — работа фотоаппарата 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

5 комментариев к записи
  • Ирина

    Юрий, а почему ты не создаешь видеоуроки с приложением только используемых кодов в текстовом виде, зачем весь процесс расписываешь словами? Я, например, ничего не могу применить на своих ресурсах-ничего не понятно. ➡ читаю-читаю.. 😥

     
    • Юрий

      Здравствуйте, Ирина!
      Кому как легче. На самом деле не всегда получается снять видео. Я учту Ваше пожелание и буду стараться сделать в наиболее понятной форме.

       
  • Валерий

    В даном прмере было бы оригиналльно последнее сделать черно белым в белой рамочке! Спасибо за ваш труд полезный!

     
  • Дмитрий Жилин

    Сразу захотелось сделать что-то подобное, но пока не придумал для чего состряпать такой бенер 🙂

     
  • Артем

    Большое спасибо за отличную статью, ваши рекомендации мне очень помогли.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *