Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
1 г. назад

Анимированные баннеры на Javascript

Чаще всего анимированные баннеры делают на Flash или GIF-анимации. Современные технологии позволяют сделать анимацию на Javascript без использования этих устаревших технологий. Разберем пример создания сайтов с использованием JQuery.

Помимо JQuery нам потребуется библиотека анимации Velocity. Итак, создаем шаблон:

<a href="" id="js__animeb" class="b__animeb oh db rel">
    <img src="images/i__medal.png" id="js__animeb-med" alt="" class="abs b__animeb-me"/>
    <img src="images/i__mtext.png" id="js__animeb-mtx" alt="" class="abs b__animeb-mt"/>
    <span id="js__animeb-txt1" class="abs b__animeb-te">Более 10 000 участников ежемесячно</span>
    <span id="js__animeb-txt2" class="abs b__animeb-te">Разработаны в соответствии с ФГОС</span>
    <span id="js__animeb-txt3" class="abs b__animeb-te">Качественное пополнение портфолио ученика и учителя</span>
</a>

Оформляем в CSS:

.b__animeb {
  background:url(../images/b__back.jpg);
  width:968px;
  height:138px;
  margin:150px auto 0
}
.b__animeb-me {
  left:-186px;
  top:0;
}
.b__animeb-mt {
  top:27px;
  left:968px
}
.b__animeb-te {
  color:#FFF;
  font-family: 'PT Sans', sans-serif;
  text-shadow:0 2px 1px rgba(0,0,0,.22);
  font-size:1.142857142857143em;
  top:138px;
  left:258px

}

Теперь продумываем анимацию. Медаль сдвигаем слева, основной текст справа. Оба элемента фиксируем. Чтобы привлечь внимание, будем менять маленький текст, чередуя их. Пишем анимацию на 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 обладает множеством поддерживаемых анимаций, включая трансформации.

Вживую посмотреть и скачать можно тут. Всё довольно просто при создании анимации на JavaScript.

Комментарии

#Hasan11.01.2016 21:33
Thank you very much! Ответить

Добавить комментарий

Наверх