Кроссбраузерная реверсивная анимация фона на CSS3

Доброго времени суток уважаемые читатели Хабра. Существуют замечательные CSS свойства с помощью которых можно задать реверсивное движение анимации — animation-direction: alternate и animation-direction: alternate-reverse (не путать со свойством animation-direction: reverse, которое задает реверсивное направление), но на сегодняшний день их не поддерживает большинство современных браузеров. Я хочу рассказать о том как сделать кроссбраузерную реверсивную анимацию фона.

netcribe

Пример на 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. В этом случае потребуется воспользоваться замечательным Принципом Цикады (подробнее об этом написано здесь). После чего указать реверсивное движение анимации.

Спасибо всем за внимание
  • +10
  • 25,8k
  • 5
Поделиться публикацией

Похожие публикации

Комментарии 5
    0
    .
      0
      Не туда попал. Сорри.
      0
      Посмотрел демо — послушал кулер.
        0
        Вы гиперболизируете. При среднестатистическом разрешении JS создает ~ 10 элементов, все остальное — CSS3. В голове есть идеи, которые можно реализовать опираясь на данный пример. Все зависит от графики. Понадобиться мне, может понадобиться и другим.
        0
        Если я правильно понял из заголовка способ кроссбраузерный, но у меня почему-то в ie и в опере пример не работает. Точнее в опере через раз и не полностью, а только первые три полосы.

        А так мне пример понравился, вполне может пригодиться ^_^ Спасибо.

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

        Самое читаемое