Як і минулого разу завантажуємо і підключаємо бібліотеку animate.css. там же можна підбирати тип анімації в зручному візуальному виконанні:
У даній статті я буду використовувати не оптимізовану версію бібліотеки annimate.css, але вам рекомендую підключати саме animate.min.css. завантажену з github. Так як ця версія менше важить, а відповідно буде завантажуватися швидше.
Я помістив її в папку "css", тому вийшов наступний шлях:
Тепер необхідно підключити jquery і плагін waypoints, який допоможе нам прокручувати анімацію в обидві сторони:
Waypoints ви можете завантажити за цим посиланням або взяти з исходника (як і інші файли, необхідні для реалізації даного ефекту).
Увага! Тестувати ефект необхідно на локальному або зовнішньому сервері. В іншому випадку анімація не буде відтворюватись.
Анімація при Скролл в обидві сторони - html розмітка
Я створив клас "box", в якому буду зберігати свої зображення.
Тут немає нічого особливого, просто задаю ширину і висоту області, в якій буду зберігати іконки. Роблю відступ зліва 50px і вирівнюю по лівому краю. Цей блок суто індивідуальний і можете не звертати на нього увагу. Просто під мій макет найкраще підходили саме ці параметри. Йдемо далі.
Для того, щоб програвалася анімація необхідно додати клас animated. Його властивості прописані в бібліотеці animate.css, яку ми підключили раніше.
Клас boxHidded, потрібен для того, щоб зробити, в початковий момент часу наші іконки повністю прозорими. Це має на увазі логіка нашого скрипта. Адже іконки, при прокручуванні повинні плавно з'явитися, а потім також плавно зникнути.
Клас delay-05s і delay-1s відповідає за затримку в програванні анімації на 0.5 секунди і 1 секунду відповідно. Давайте розглянемо властивості, задані цим класам:
На цьому робота з таблицею стилів закінчена, нам залишилося перед закривається тегом body розмістити наступний скрипт
Зверніть увагу на рядки:
У них ми додаємо і видаляємо класи, що відповідають за стилі анімації, які будуть програватися при прокручуванні. В даному випадку fadeInUp і fadeOutDown. Ви можете вибрати будь-які види анімації, представлені на офіційній сторінці бібліотеки animate.css.
Щоб змінити момент, в який повинна почати програватися анімація - змінюйте значення offset. В даному випадку задано 80%. Як я зрозумів, це відстань від верхньої точки екрану, до блоку, який анімуємо.
Мене кілька разів запитували про те, чи є можливість задати відстань до старту анімації в процентах, так як монітори у всіх різні. У минулому варіанті виконання даного ефекту не було можливості зробити цього в процентах. Через це виникали певні проблеми.
В даному випадку - ця проблема вирішена. Перший offset відповідає за старт анімації. А другий за зникнення блоків. Тобто, коли стає не видно 50 пікселів анімації контенту. Спробуйте! На прикладі ви все зрозумієте.
P.s. Waypoint оновився до версії 3.0, тому качати з Github сенсу немає. Я не вникав, але схоже зміни виявилися настільки кардинальними, що даний скрип не працює коректно з новою версією. Тому в исходнике лежить версія 2.0. З нею все працює відмінно.
Це цікаво:
- Як закріпити шапку сайту при прокручуванні сторінки
- Закреслення ціни. Ще один тригер, який може підвищити конверсію
- Як закрити зовнішні посилання від індексації
