JQuery анимиран банер

В този урок ще създадем анимиран банер с помощта на jQuery. Същността на идеята е поетапно анимиране на различни елементи от банера с помощта на различни графични ефекти.

Приставките JQuery Easing и 2D Transform ще бъдат използвани за създаване на стилни анимационни ефекти.

HTML кодът на банера ще съдържа div елементи: main и slide. Слайдът div е необходим за организиране на граница около банера (ако е необходимо).

Използваме два класа за всеки елемент, тъй като сме дефинирали общ стил за всички елементи и персонализиран стил за всеки елемент (тъй като на страницата може да има няколко различни банера). В урока е разгледан банер 1. В изходния код в кода на демонстрационната страница можете да видите изпълнението на втория банер, в който има само две зони.

Първо, нека дефинираме стила на банера. Той има подплата и много тънка граница, която, когато се комбинира с падаща сянка, създава страхотен ефект:

Демото също използва ляво подравняване на плаващи кутии, тъй като искаме да покажем два банера един до друг. Персонализираните стилове за банер 1 (например неговият размер) ще бъдат определени по-късно. Плъзгащият елемент просто запълва банерния елемент:

Зоните са позиционирани абсолютно. Потребителските стилове на зони ще бъдат дефинирани по-късно:

Ширината е зададена на 100%, тъй като при показване и скриване на елементи в браузъра Chrome възниква грешка. И с тази стойност всичко работи добре.

Контейнерът за изображението в областта има свойство display: table-cell, защото искаме да центрираме изображението в него. Някои ефекти ще променят мащаба на изображението при показване и скриване на изображението и по този начин ще бъдем сигурни, че то остава в центъра на контейнера:

---