• Главная  
• Блог  
• Анимированные баннеры на Javascript

Анимированные баннеры на 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.