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

Анимированные баннеры на 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!Ответить

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

Наверх