Від автора: вітаю вас, друзі. Говорячи про кращих jQuery плагіни, навряд чи вийде обійти стороною тему ефекти Parallax, зокрема jQuery анімації при скролінгу сторінок, коли приховані раніше об’єкти з’являються на сторінці один за іншим. Виглядають подібні ефекти дуже цікаво. Давайте спробуємо відтворити паралакс ефект, використовуючи плагін ScrollMe.
Отже, сьогодні ми попрацюємо з jQuery плагіном ScrollMe, який дозволяє показувати різні об’єкти з ефектом jQuery анімації при скролле. Такі штуки особливо популярні на продають сторінках (Landing Page), мета яких утримати користувача та залучити його до свого товару або послуги. Такі сторінки, як правило, досить довгі, і на них анімація при прокручуванні сторінки виглядає приємно і, що називається, до місця.
Давайте перейдемо на офіційну сторінку плагіна і завантажити його. Тут ми не лише зможемо спостерігати плагін jQuery анімація при скролінгу в дії, але і, само собою, ознайомитися з документацією до нього. Давайте підключимо скрипт плагіна ScrollMe:
Тепер давайте створимо необхідну розмітку. Нехай це буде великий блок тексту, після нього буде йти шуканий об’єкт, до якого і буде застосовуватися ефект Parallax — поява об’єкта з ефектом Parallax при прокручуванні сторінки.
Багато тексту…
Шуканий об’єкт для анімації
Багато тексту…
Тепер щоб запрацювала jQuery анімація при скролінгу сторінок, необхідно налаштувати шуканий об’єкт. Зокрема, необхідно додати кілька класів: scrollme і animateme. Також необхідно додати ряд атрибутів data-, які і налаштують необхідний варіант анімації.
Потрібні налаштування можна взяти прямо з прикладів на сторінці плагіна. Вибирайте потрібний ефект, копіюйте його налаштування і використовуйте на свій сторінці. Наприклад так:
Шуканий об’єкт для анімації
Ну а на сьогодні все. Як бачите, Parallax анімація у вигляді jQuery анімації при скролле створюється досить просто. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!
