Като последен път сме да изтеглите и да се свържете animate.css библиотека. Там можете да изберете вида на анимацията в удобен визуален спектакъл:
В тази статия ще използвам не annimate.css оптимизирана версия на библиотеката, но аз ви препоръчвам да го свържете animate.min.css. изтеглен от GitHub. Тъй като тази версия тежи по-малко, и затова ще се зареди по-бързо.
Сложих го в "CSS" папка, така че да получите следния път:
Сега трябва да се свърже JQuery плъгин и точки, които да ни помогнат да преминете през анимацията и в двете посоки:
Точки можете да изтеглите на този линк, или да вземат от източника (както и други файлове, които са необходими за тази цел).
Внимание! Тествайте ефекта трябва да е на местно или на външен сървър. В противен случай, анимацията ще се играе.
Анимация, когато превъртате и в двете посоки - HTML маркиране
Създадох клас "кутия", която ще запази вашите изображения.
Няма нищо специално, просто зададете ширината и височината на областта, в която ще пазя иконите. Се отмества 50px наляво и подравнен вляво. Това устройство е индивидуална и не може да се обърне внимание на това. Малко под моя оформление най-добре отговаря на тези параметри. Продължавай.
За да играете трябва да добавите анимация анимационен клас. Свойствата му са регистрирани в библиотека animate.css, ние сме свързани по-рано.
Клас boxHidded, трябва да направите, в началния времето на нашите икони напълно прозрачни. Това предполага логиката на сценария. След като всички икони, когато превъртате трябва постепенно да се появяват, а след това и да изчезне постепенно.
Клас закъснение 05s забавяне-1s и отговорни за забавянето на възпроизвеждането на анимация съответно за 0.5 секунди и 1 секунда. Нека разгледаме свойства, определени тези класове:
В тази работа с лист стил приключи, ние оставихме преди затварянето маркер за мястото следния скрипт
Обърнете внимание на реда:
В тях можем да добавим и премахване на класовете, които са отговорни за анимация стилове, които ще се играят, когато се превърта. В този случай fadeInUp и fadeOutDown. Можете да изберете всякакъв вид анимация, показани на официалния сайт animate.css библиотеката.
За да промените часа, което трябва да започне да играе анимация - промяна на стойността на отместването. В този случай, 80% е настроен. Както аз го разбирам, е разстоянието от горната част на екрана, до блока, който е анимирате.
Попитах няколко пъти за това дали има възможност за задаване на разстоянието до началото на анимацията като процент, като мониторите са различни. В миналото, въплъщение на този ефект не са били в състояние да направи това като процент. Поради това, че имаше някои проблеми.
В този случай - проблемът е решен. Първият офсет е отговорен за началото на анимацията. Вторият блок за изчезването. Това означава, че когато стане не се вижда пиксела 50 анимирано съдържание. Опитайте го! На примера ще разбереш.
Послепис Waypoint беше обновен до версия 3.0, така че да се изтегли от Github че няма никакъв смисъл. Не отидох в, но изглежда, че промените не са били толкова драматични, че скърцането не работи правилно с новата версия. Ето защо, в редакцията му източник е 2.0. С него всичко работи добре.
Това е интересно:
- Как да се определи горна граница на сайта, докато превъртате
- Зачертаване цени. Друг спусък, който може да увеличи реализации
- Как да се затвори външните връзки индексиране
Свързани статии