Анимируем изображение при помощи 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;lt;название keyframe&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;длительность анимации&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;количество итераций&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;временная функция&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);} }
Добавить комментарий