Блог

Анімуємо зображення за допомогою CSS keyframes

Предыстория написания статьи. Параллакс-скроллинг. В течении нескольких последних месяцев, мне нередко доводилось делать одностраничные сайты (Landing Page) с различными визуальными эффектами и в том числе с так называемым параллакс эффектом.

Верстать или не верстать

Параллакс-скроллинг представляет собой дизайнерский концепт, успешно проложивший свой путь в мире современного веб-дизайна. Nike была первой компанией, которая использовала эту технику успешно, наняв маркетингового гиганта Weiden and Kennedy для создания оригинального сайта – Nike Better World (на данный момент компания Nike обновила свой сайт).

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

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

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

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

Как верстается параллакс-скроллинг

Изучая лучшие западные практики разработки web дизайна, я столкнулся с самыми разными способами реализации параллакса, в частности мне попалось вот такое <a style=”color: #6ce26c;” target=”blank” rel=”nofollow” ref=”http://vimeo.com/79329423″>видео</a> в котором дизайнер Joe Fellows объясняет как применить параллакс эффект к фотографиям используя комбинацию Photoshop и After Effects.

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

Естественно возможности анимации мы будем рассматривать на примерах.

* В допотопных браузерах некоторые эффекты могут работать некорректно.

Баскетбольный мяч и Keyframe

В настоящий момент поддержка такой анимации существует только в браузерах на базе WebKit — Chrome и Safari. Но тема настолько интересна, что стоит её рассмотреть — ведь будущее не за горами, и скоро вслед за Хромом подтянутся и другие браузеры.

Первым пунктом в создании CSS анимации идёт создание keyframe’ов (ключевых кадров). Вообще, Keyframe представляет собой набор правил, которые будут применяться в течение анимации. можно провести грубое сравнение keyframes с функциями — сначала мы объявляем ключевые кадры, и затем вызываем эту анимацию в любом месте CSS.

Сделаем пример простейшей анимации — при наведении на мячик он начинает прыгать, ударится о воображаемые стену и вернется обратно:

Верстаем анимацию

/*сам наш мячик:*/
#ball {
 width: 89px;
 height: 80px;
 background:url(../images/ball.jpg) no-repeat;
 position: relative;
 bottom: 0;
 } 
/*Создаем анимацию:
Этим кодом мы создаем анимацию при наведении курсором на наш объект.
Порядок такой: &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;название keyframe&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;длительность анимации&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;количество итераций&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;временная функция&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.
*/
#ball:hover {
 -webkit-animation: balls 3.5s infinite ease;
 -moz-animation: balls 3.5s infinite ease;
 -ms-animation: balls 3.5s infinite ease;
 -o-animation: balls 3.5s infinite ease;
 animation: balls 3.5s infinite ease;
 }

/*Теперь создадим ключевые кадры. Сначала мы задаем имя нашей анимации — в примере это будет «balls».
Затем мы описываем ключевые кадры анимации:*/ 
@-webkit-keyframes balls {
 0% { bottom: 0; left: 0;} 5% { bottom: 150px; left: 100px; transform: rotateZ(0deg);} 10% { bottom: 0px; left: 200px; transform: rotateZ(160deg);} 15% { bottom: 130px; left: 300px; transform: rotateZ(240deg);} 20% { bottom: 0px; left: 400px; transform: rotateZ(360deg);} 25% { bottom: 110px; left: 500px; transform: rotateZ(440deg);} 30% { bottom: 0px; left: 600px; transform: rotateZ(520deg);} 35% { bottom: 90px; left: 700px; transform: rotateZ(600deg);} 40% { bottom: 0px; left: 800px; transform: rotateZ(660deg);} 45% { bottom: 70px; left: 900px; transform: rotateZ(700deg);} 50% { bottom: 0px; left: 800px; transform: rotateZ(700deg);} 55% { bottom: 0px; left: 700px; transform: rotateZ(360reg);} 60% { bottom: 0px; left: 610px; transform: rotateZ(540reg);} 65% { bottom: 0px; left: 530px; transform: rotateZ(680reg);} 70% { bottom: 0px; left: 460px; transform: rotateZ(760reg);} 75% { bottom: 0px; left: 360px; transform: rotateZ(840reg);} 80% { bottom: 0px; left: 260px; transform: rotateZ(920reg);} 85% { bottom: 0px; left: 160px; transform: rotateZ(1000reg);} 90% { bottom: 0px; left: 80px; transform: rotateZ(1060reg);} 100% { bottom: 0px; left: 0px; transform: rotateZ(1110reg);} 
 }
@-moz-keyframes balls {
 0% { bottom: 0; left: 0;} 5% { bottom: 150px; left: 100px; transform: rotateZ(0deg);} 10% { bottom: 0px; left: 200px; transform: rotateZ(160deg);} 15% { bottom: 130px; left: 300px; transform: rotateZ(240deg);} 20% { bottom: 0px; left: 400px; transform: rotateZ(360deg);} 25% { bottom: 110px; left: 500px; transform: rotateZ(440deg);} 30% { bottom: 0px; left: 600px; transform: rotateZ(520deg);} 35% { bottom: 90px; left: 700px; transform: rotateZ(600deg);} 40% { bottom: 0px; left: 800px; transform: rotateZ(660deg);} 45% { bottom: 70px; left: 900px; transform: rotateZ(700deg);} 50% { bottom: 0px; left: 800px; transform: rotateZ(700deg);} 55% { bottom: 0px; left: 700px; transform: rotateZ(360reg);} 60% { bottom: 0px; left: 610px; transform: rotateZ(540reg);} 65% { bottom: 0px; left: 530px; transform: rotateZ(680reg);} 70% { bottom: 0px; left: 460px; transform: rotateZ(760reg);} 75% { bottom: 0px; left: 360px; transform: rotateZ(840reg);} 80% { bottom: 0px; left: 260px; transform: rotateZ(920reg);} 85% { bottom: 0px; left: 160px; transform: rotateZ(1000reg);} 90% { bottom: 0px; left: 80px; transform: rotateZ(1060reg);} 100% { bottom: 0px; left: 0px; transform: rotateZ(1110reg);} 
 } 
@-ms-keyframes balls {
 0% { bottom: 0; left: 0;} 5% { bottom: 150px; left: 100px; transform: rotateZ(0deg);} 10% { bottom: 0px; left: 200px; transform: rotateZ(160deg);} 15% { bottom: 130px; left: 300px; transform: rotateZ(240deg);} 20% { bottom: 0px; left: 400px; transform: rotateZ(360deg);} 25% { bottom: 110px; left: 500px; transform: rotateZ(440deg);} 30% { bottom: 0px; left: 600px; transform: rotateZ(520deg);} 35% { bottom: 90px; left: 700px; transform: rotateZ(600deg);} 40% { bottom: 0px; left: 800px; transform: rotateZ(660deg);} 45% { bottom: 70px; left: 900px; transform: rotateZ(700deg);} 50% { bottom: 0px; left: 800px; transform: rotateZ(700deg);} 55% { bottom: 0px; left: 700px; transform: rotateZ(360reg);} 60% { bottom: 0px; left: 610px; transform: rotateZ(540reg);} 65% { bottom: 0px; left: 530px; transform: rotateZ(680reg);} 70% { bottom: 0px; left: 460px; transform: rotateZ(760reg);} 75% { bottom: 0px; left: 360px; transform: rotateZ(840reg);} 80% { bottom: 0px; left: 260px; transform: rotateZ(920reg);} 85% { bottom: 0px; left: 160px; transform: rotateZ(1000reg);} 90% { bottom: 0px; left: 80px; transform: rotateZ(1060reg);} 100% { bottom: 0px; left: 0px; transform: rotateZ(1110reg);} 
 } 
@-o-keyframes balls {
 0% { bottom: 0; left: 0;} 5% { bottom: 150px; left: 100px; transform: rotateZ(0deg);} 10% { bottom: 0px; left: 200px; transform: rotateZ(160deg);} 15% { bottom: 130px; left: 300px; transform: rotateZ(240deg);} 20% { bottom: 0px; left: 400px; transform: rotateZ(360deg);} 25% { bottom: 110px; left: 500px; transform: rotateZ(440deg);} 30% { bottom: 0px; left: 600px; transform: rotateZ(520deg);} 35% { bottom: 90px; left: 700px; transform: rotateZ(600deg);} 40% { bottom: 0px; left: 800px; transform: rotateZ(660deg);} 45% { bottom: 70px; left: 900px; transform: rotateZ(700deg);} 50% { bottom: 0px; left: 800px; transform: rotateZ(700deg);} 55% { bottom: 0px; left: 700px; transform: rotateZ(360reg);} 60% { bottom: 0px; left: 610px; transform: rotateZ(540reg);} 65% { bottom: 0px; left: 530px; transform: rotateZ(680reg);} 70% { bottom: 0px; left: 460px; transform: rotateZ(760reg);} 75% { bottom: 0px; left: 360px; transform: rotateZ(840reg);} 80% { bottom: 0px; left: 260px; transform: rotateZ(920reg);} 85% { bottom: 0px; left: 160px; transform: rotateZ(1000reg);} 90% { bottom: 0px; left: 80px; transform: rotateZ(1060reg);} 100% { bottom: 0px; left: 0px; transform: rotateZ(1110reg);} 
 } 

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *