Анимированные баннеры на Javascript
Чаще всего анимированные баннеры делают на Flash или GIF-анимации. Современные технологии позволяют сделать анимацию на Javascript без использования этих устаревших технологий. Разберем пример создания сайтов с использованием JQuery.
Помимо JQuery нам потребуется библиотека анимации Velocity. Итак, создаем шаблон:
<a href="" id="js__animeb" class="b__animeb">
<img src="images/i__medal.png" id="js__animeb-med" alt="" class="b__animeb-me"/>
<img src="images/i__mtext.png" id="js__animeb-mtx" alt="" class="b__animeb-mt"/>
<span id="js__animeb-txt1" class="b__animeb-te">Более 10 000 участников ежемесячно</span>
<span id="js__animeb-txt2" class="b__animeb-te">Разработаны в соответствии с ФГОС</span>
<span id="js__animeb-txt3" class="b__animeb-te">Качественное пополнение портфолио ученика и учителя</span>
</a>
Оформляем в CSS:
.b__animeb {
background : url(../images/b__back.jpg);
width : 968px;
height : 138px;
margin : 150px auto 0;
position : relative;
overflow : hidden;
display : block
}
.b__animeb-me {
left : -186px;
top : 0;
position : absolute
}
.b__animeb-mt {
top : 27px;
left : 969px;
position : absolute
}
.b__animeb-te {
color : #FFF;
font-size : 1.142857142857143em;
top : 138px;
left : 258px;
position : absolute
}
Теперь продумываем анимацию. Медаль сдвигаем слева, основной текст справа. Оба элемента фиксируем. Чтобы привлечь внимание, будем менять маленький текст, чередуя их. Пишем анимацию на JS:
function b_anime(i){
$('#js__animeb .b__animeb-te:visible')
.velocity({ rotateZ : 138 }, 300, "easeInOutQuad") //если элемент(маленький текст) виден, мы его поворачиваем
.velocity({ opacity : 0 }, 300, "easeInOutQuad") //скрываем
.velocity({ top: 138 }, 1200, "easeInOutQuad"); // и убираем за пределы окна
$('#js__animeb-txt'+i)
.velocity({ rotateZ : 0 }, 300, "easeInOutQuad") // у следующего маленького текста убираем поворот
.velocity({ opacity : 1 }, 300, "easeInOutQuad") // делаем видимым
.velocity({ top: 88 }, 2000, "easeInOutBack"); // и двигаем в нужное место.
}
$(document).ready(function () {
$('#js__animeb-med').velocity({ left: 0 }, 4000, "easeInOutQuart"); // один раз выдвигаем медаль слева
$('#js__animeb-mtx').velocity({ left: 259 }, 4000, "easeInOutQuart"); // один раз выдвигаем основной текст справа
var i=1; //счетчик первого маленького текста
b_anime(i); // вызываем анимацию маленького текста
setInterval(function(){
i++; //так как первый маленький текст показали, увеличиваем на 1 счетчик, что бы был показан следующий текст.
if (i > 3) {
i = 1; //если счетчик больше количества маленьких текстов, то сбрасываем в 1.
}
b_anime(i); // вызываем функцию анимации маленького текста.
}, 5000); // зацикливаем анимацю маленького текста
});
Выбрана библиотека Velocity не случайно. На момент написания статьи она обладает самой плавной анимацией, в отличие от стандартной JQuery-функции animate(). Последняя функция в разных браузерах работает по-разному. Также, в дополнение, Velocity обладает множеством поддерживаемых анимаций, включая трансформации.
See the Pen Animated banners using Jquery by Pavel Saik (@PavelSaik) on CodePen.
Всё довольно просто при создании анимации на JavaScript.