Ca și în ultima oară, descărcați și conectați biblioteca animate.css. acolo puteți selecta tipul de animație într-o performanță vizuală convenabilă:
In acest articol voi folosi nu annimate.css versiune optimizată a bibliotecii, dar vă recomand să conectați-l animate.min.css. descărcat de la github. Deoarece această versiune cântărește mai puțin, și în consecință va fi încărcată mai repede.
Am pus-o în dosarul "css", așa că am următorul mod:
Acum trebuie să vă conectați jQuery și pluginul punctelor, care ne vor ajuta să derulam animația în ambele direcții:
Punctele de parcurs pe care le puteți descărca de pe acest link sau puteți lua de la sursă (precum și alte fișiere necesare pentru implementarea acestui efect).
Atenție vă rog! Testați efectul pe un server local sau extern. În caz contrar, animația nu va fi redată.
Animație cu o defilare în ambele direcții - marcaj html
Am creat o clasă "cutie" în care îmi voi stoca imaginile.
Nu este nimic special, doar setați lățimea și înălțimea zonei în care voi stoca pictogramele. Fac o liniuță la stânga de 50px și aliniază spre stânga. Acest bloc este pur individual și nu-i poți da atenție. Doar acești parametri au fost cei mai buni pentru aspectul meu. Mergem mai departe.
Pentru ca animația să se joace, trebuie să adăugați o clasă animată. Proprietățile sale sunt înregistrate în biblioteca animate.css, pe care am conectat-o mai devreme.
Cutia de clasăHidded, este necesară pentru a face, în momentul inițial, icoanele noastre sunt complet transparente. Aceasta implică logica scenariului nostru. La urma urmei, icoanele, atunci când defilați, ar trebui să apară fără probleme și apoi să dispară și fără probleme.
Întârzierea de clasă-05s și întârzierea-1s sunt responsabile pentru întârzierea în redarea animației timp de 0,5 secunde și, respectiv, de 1 secundă. Să analizăm proprietățile atribuite acestor clase:
La această lucrare cu foaia de stil se termină, trebuie să plasăm următorul script înainte de eticheta de închidere a corpului
Acordați atenție liniilor:
În ele, adăugăm și eliminăm clasele care sunt responsabile pentru stilurile de animație care vor fi redate atunci când defilați. În acest caz fadeInUp și fadeOutDown. Puteți alege orice fel de animație prezentată pe pagina oficială a animate.css din bibliotecă.
Pentru a schimba punctul în care animația ar trebui să înceapă să fie redată, schimbați valoarea offset. În acest caz, este setat 80%. După cum o înțeleg, aceasta este distanța de la partea de sus a ecranului, la blocul care este animat.
Am fost întrebat de mai multe ori dacă există posibilitatea de a seta distanța până la începutul animației în procente, deoarece monitoarele sunt diferite. În versiunea anterioară a acestui efect, nu a fost posibil să se facă acest lucru ca procentaj. Din cauza asta, au existat anumite probleme.
În acest caz, această problemă este rezolvată. Primul offset este responsabil pentru pornirea animației. Și al doilea pentru dispariția blocurilor. Adică atunci când devine imposibil să vezi 50 de pixeli de conținut animat. Încearcă! Pe un exemplu, veți înțelege totul.
P.S. Waypoint a fost actualizat la versiunea 3.0, deci nu are rost să descărcați Github. Nu am intrat în ea, dar se pare că schimbările au fost atât de dramatice încât acest script nu funcționează corect cu noua versiune. Prin urmare, sursa este versiunea 2.0. Cu ea, totul funcționează bine.
Acest lucru este interesant:
- Cum să remediați un antet al site-ului când derulați o pagină
- Costul izbitoare. Un alt declanșator care poate crește conversia
- Cum să închideți linkurile externe din indexare
