CSS анимация на елементи при превъртане на страница
Като начало подготвих html страница с прости елементи (заглавия и картинки), които ще анимираме. Ето HTML кода на страницата:
И просто CSS маркиране:
Както можете да видите, всичко е наистина много просто.
Ние включваме animate.css. Създаване на елементна анимация
Изтеглете библиотеката animate.css. Поставих файла animate.min.css в папката /libs до html страницата. Свързваме animate.min.css като обикновен css файл, между .
Сега трябва да добавите необходимите стилови класове css към елементите, които трябва да бъдат анимирани.Трябва да добавите анимирания клас и клас с името на анимацията, например swing. Ето какво се случва в крайна сметка за заглавието h1:
Сега това заглавие ще възпроизведе определената анимация, когато страницата се зареди. По същия начин настройваме анимацията за други елементи:
Добавихме анимирани класове за заглавката и за всяка колона те вече ще възпроизвеждат анимация при зареждане на страницата. По същия начин можете да добавите анимация към останалите елементи на страницата. Но има малък проблем, цялата анимация ще се възпроизведе, когато страницата се зареди. И когато превъртаме до елементи, които са извън първия екран, вече няма да виждаме анимацията, тъй като това вече се е случило, когато страницата е била заредена. За да показвате анимацията само когато елементът се вижда, трябва да включите библиотеката wow.js
Свързване на библиотеката wow.js за анимация при превъртане на страницата
Библиотеката wow.js е специално направена да работи в тандем с библиотеката animate.css. Работи по такъв начин, че анимацията на елементите не работи, когато страницата е заредена, но когато тези елементи попаднат в зоната на видимост, тогавае при превъртане на страницата.
За да свържа библиотеката, поставих файла wow.min.js в gre / libs до страницата и го включвам като обикновен js скрипт. Освен това след свързване тази библиотека трябва да се инициализира. Включете wow.js след включване на jquery. Това е предпоставка.
Сега, когато библиотеката е свързана, нека да преминем към редактиране на кода. За да приложите wow.js към елементи, трябва да добавите класа wow. Между другото, можете да замените анимирания клас с него. Получава се така.
Като променим animated на wow на всички елементи с анимация, ще видим, че сега анимацията на елементите се задейства при превъртане на страницата, а не при зареждане.
Библиотеката wow.js съдържа и допълнителни настройки. Можете да ги видите в документацията на сайта на тази библиотека. Например, можете да добавите забавяне към анимацията. Задава се от html5 параметъра data-wow-delay="1s". Вместо 1s, можете да посочите своя собствена стойност на забавяне. Зададох забавяне за елементите от първия раздел, така че анимацията на всеки елемент да започне след предишния и ето какво се случи: