Доброго времени суток уважаемые читатели Хабра. Существуют замечательные CSS свойства с помощью которых можно задать реверсивное движение анимации — animation-direction: alternate и animation-direction: alternate-reverse (не путать со свойством animation-direction: reverse, которое задает реверсивное направление), но на сегодняшний день их не поддерживает большинство современных браузеров. Я хочу рассказать о том как сделать кроссбраузерную реверсивную анимацию фона.
Пример на Jsfiddle
HTML
<html> <head></head> <body id="body"><body> </html> CSS
Задаем цвет фона (pattern.png — текстура в данном примере) и высоту страницы равную высоте окна браузера:
html{ height: 100%; min-height: 100%; } body{ background:url('http://www.netcribe.com/images/pattern.png') repeat fixed left center #0296BA; overflow:hidden; } Анимированная часть фона — иконки, изображение которых будет бэкграундом элементов с классом .icons. Ширина равна ширине фонового изображения.
leadicons.png (4898px * 32px)
.icons{ background-image:url('http://www.netcribe.com/images/leadicons.png'); background-repeat:repeat-x; height:60px; width:4898px; clear:both; /*animation-duration*/ -webkit-animation-duration:200s; -moz-animation-duration:200s; -ms-animation-duration:200s; -o-animation-duration:200s; animation-duration:200s; /*animation-iteration-count*/ -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; animation-iteration-count:infinite; } В CSS указаны два класса movement-left, которому присвоена анимация с движением влево и movement-right, которому присвоена анимация с движением вправо:
.move-left{ /*animation-name*/ -webkit-animation-name:movement-left; -moz-animation-name:movement-left; -ms-animation-name:movement-left; -o-animation-name:movement-left; animation-name:movement-left; } .move-right{ /*animation-name*/ -webkit-animation-name:movement-right; -moz-animation-name:movement-right; -ms-animation-name:movement-right; -o-animation-name:movement-right; animation-name:movement-right; } Javascript
Важно чтобы движение элементов с классом .icons начиналось с разных позиций, поэтому у всех элементов должны быть разные свойства background-position, а в самих функциях анимации изменяться свойство margin.
CSS стили с использованием animation-direction:
.icons{ background-image:url('http://www.netcribe.com/images/leadicons.png'); background-repeat:repeat-x; height:60px; width:4898px; clear:both; /*animation-duration*/ -webkit-animation-duration:200s; -moz-animation-duration:200s; -ms-animation-duration:200s; -o-animation-duration:200s; animation-duration:200s; /*animation-iteration-count*/ -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; animation-iteration-count:infinite; /*animation-name*/ -webkit-animation-name:movement; -moz-animation-name:movement; -ms-animation-name:movement; -o-animation-name:movement; animation-name:movement; } .move-left{ /*animation-direction*/ -webkit-animation-direction:alternate; -moz-animation-direction:alternate; -ms-animation-direction:alternate; -o-animation-direction:alternate; animation-direction:alternate; } .move-right{ /*animation-direction*/ -webkit-animation-direction:alternate-reverse; -moz-animation-direction:alternate-reverse; -ms-animation-direction:alternate-reverse; -o-animation-direction:alternate-reverse; animation-direction:aalternate-reverse; } В этом случае значительно бы сократился javascipt код
<script src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
$(document).ready(function(){ var clientWidth, clientHeight, x, y, z; clientWidth = $("html").width(); clientHeight = $("html").height(); margin = 4898 - parseInt(clientWidth); x=Math.ceil(clientHeight/60); // Целое число элементов с классом .icons требуемых для заполнения страницы по высоте y=0; // Разные значения свойства background-position z=Math.ceil(4898/(2*x)); // Оптимальная разцица значений background-position $("#body").css({'width':clientWidth,'height':clientHeight}); Генерируем функции анимации:
$("#body").append('<style>@keyframes movement-left {from {} to {margin-left: '+ -margin +'px;}} @keyframes movement-right {from {} to {margin-left: 0px;} @-moz-keyframes movement-left {from {} to {margin-left: '+-margin+'px;}} @-moz-keyframes movement-right {from {} to {margin-left:0px;} @-ms-keyframes movement-left {from {} to {margin-left: '+ -margin +'px;}} @-ms-keyframes movement-right {from {} to {margin-left: 0px;}} @-o-keyframes movement-left {from {} to {margin-left: '+ -margin +'px;}} @-o-keyframes movement-right {from {} to {margin-left: 0px;}} @-webkit-keyframes movement-left {from {} to {margin-left: '+ -margin +'px;}} @-webkit-keyframes movement-right {from {} to {margin-left: 0px;}} </style>'); Создаем элементы с классом .icons:
for(var i=0;i<x;i++){ if(i%2==0){ $("#body").append('<div style="background-position:'+y+'px 0;" class="icons move-left">'); } else{ $("#body").append('<div style="background-position:'+y+'px 0; margin-left: '+ -margin +'px" class="icons move-right">');}y+=z;} }); Зачем изменять margin, когда можно изменять только background-position:
В этом случае расстояние до финальной позиции указанной в background-position у всех элементом будет разное, как и скорость движения. Из за чего анимация выглядит ужасно
Принцип Цикады
Реализовать данный пример возможно, используя одну анимацию, в которой будет изменяться только background-position. В этом случае потребуется воспользоваться замечательным Принципом Цикады (подробнее об этом написано здесь). После чего указать реверсивное движение анимации.
Спасибо всем за внимание
ссылка на оригинал статьи http://habrahabr.ru/post/160347/
Добавить комментарий