Анімований банер на jQuery
У цьому уроці ми зробимо анімований банер за допомогою jQuery. Суть ідеї полягає в тому, щоб поетапно анімувати різні елементи банера із застосуванням різноманітних графічних ефектів.
Використовуватимуться плагіни для jQuery Easing та 2D Transform для створення стильних ефектів анімації.
Код HTML банера міститиме елементи div: основний та slide. Елемент div slide потрібен для організації рамки навколо банера (якщо вона потрібна).
Ми використовуємо два класи для кожного елемента, тому що ми визначили загальний для всіх елементів стиль та власний стиль для кожного елемента (оскільки на сторінці може бути кілька різних банерів). В уроці розглядається банер 1. У вихідних кодах демонстраційної сторінки можна переглянути реалізацію другого банера, в якому є тільки дві зони.
Спочатку визначимо стиль для банера. Він має відступи та дуже тонку рамку, яка у поєднанні з тінню створює відмінний ефект:
У демонстрації також використовується вирівнювання плаваючих блоків вліво, тому що ми хочемо виводити два банери поруч. Власні стилі для банера 1 (наприклад, його розмір) буде визначено пізніше. Елемент slide просто заповнює елемент банера:
Зони абсолютно позиціонуються. Власні стилі для зон будуть визначатися пізніше:
Ширині надається значення 100% тому, що в браузері Chrome виникає помилка при виведенні та приховуванні елементів. А з таким значенням все працює чудово.
Контейнер для зображення в зоні має властивість display:table-cell, тому що ми хочемо центрувати зображення всередині нього. У деяких ефектах буде змінюватися масштаб картинки при виведенні та прихованні зображення, і так ми будемо впевнені, що вона залишається в центрі контейнера:
З цієї жТому ми встановлюємо для зображення властивість display:inline. Використовувати вирівнювання тексту до блокового елемента не можна, але за допомогою jQuery ми виводимо блок правильно:
Потім визначаються власні стилі для банера 1, його зон та контейнерів:
Клас для фону, який використовуватиметься для елемента div разом із класом “slide”:
Зони отримують інформацію про позиціонування, а контейнерів встановлюються розміри. Потрібно, щоб усі зображення для однієї зони мали однаковий розмір, так як Javascript буде визначатися максимальний розмір при проведенні операцій масштабування:
Якщо у вас є ще банери, то для них також потрібно визначити стилі для зон і контейнерів, але зі зміною номера банера. У демонстрації визначаються стилі баннера 2.
Оскільки наш скрипт працюватиме як плагін, потрібно визначити кілька параметрів для нього.
Змінна “steps” має структуруsteps:[step1,step2. stepN].
Для кожного кроку ми визначаємо перехід для кожної зони/області у банері.
У нашому прикладі у першому банері у нас визначено 3 зони, кожна зі своїм набором зображень (зображення всередині div “ca_wrap”). Одне із зображень виводиться за замовчуванням, у прикладі це перше зображення (1).
На першому кроці перша та третя зона виводитимуть друге зображення, а друга зона залишиться без змін. Коли ми змінюємо кожне зображення, то використовуємо якийсь анімаційний ефект, визначений у плагіні.
У першому банері буде 5 кроків. Ось як вони визначаються у коді:
Звичайно, ви можете визначити свої ефекти, просто додавши їх у частину плагіна "switch (effect)".
Цей урок підготовлений для вас командою сайту ruseller.com Джерело уроку:tympanus.net/codrops/2010/10/18/custom-animation-banner/ Переклав: Сергій Фастунов Урок створено: 15 Листопада 2010 Переглядів: 50477 Правила передруку
5 останніх уроків рубрики "jQuery"
Анімація набір тексту на jQuery
Сьогодні ми хотіли б вам розповісти про бібліотеку TypeIt — безкоштовний jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна досягти дуже реалістичного ефекту.
Тимчасова шкала на jQuery
jQuery плагін для створення тимчасової шкали.
Малюємо діаграму Ганта
jQuery плагін для створення діаграми Ганта.
AJAX та PHP: завантаження файлу
Приклад того, як здійснити завантаження файлу через PHP і jQuery ajax.