Css animáció mindkét irányban történő görgetéskor
Mint az utolsó alkalommal, letöltjük és csatlakoztatjuk a animate.css könyvtárat. ott kiválaszthatja az animáció típusát a kényelmes vizuális teljesítmény érdekében:
Ebben a cikkben az annimate.css könyvtár nem minősített verzióját fogom használni, de azt javaslom, hogy csatlakoztasson animate.min.css fájlt. letöltve a githubból. Mivel ez a verzió kevesebbet mér, és ennek megfelelően gyorsabb lesz a betöltése.
A "css" mappába helyeztem, így a következőképpen jutottam el:
Most meg kell csatlakoztatnia a jQuery és a waypoints plugin-ot, amelyek segítenek az animáció görgetéséhez mindkét irányban:
A linkről letölthető útvonali pontok, vagy a forrásból (valamint a hatás végrehajtásához szükséges egyéb fájlokból) letölthető.
Figyelem! Tesztelje a hatását egy helyi vagy külső kiszolgálóra. Ellenkező esetben az animáció nem fog lejátszódni.
Animáció görgetéssel mindkét irányban - html jelölés
Készítettem egy "box" osztályt, amelyben tárolom a képeimet.
Nincs semmi különleges, csak állítsa be a terület szélességét és magasságát, amelyben az ikonokat tárolom. Bemutatom a bal oldali 50 pontot, és balra igazítom. Ez a blokk tisztán egyedi, és nem figyelhet rá. Csak az, hogy ezek a paraméterek voltak a legjobbak az elrendezésemhez. Tovább mennünk.
Annak érdekében, hogy az animáció lejátszódjon, hozzá kell adnia egy animált osztályt. Tulajdonságait regisztrálják a animate.css könyvtárban, amelyet korábban összekapcsoltunk.
A klasszikus boxHidded-nek szüksége van ahhoz, hogy az első pillanatban az ikonok teljesen átlátszóak legyenek. Ez a szkriptünk logikáját jelenti. Végül is az ikonok gördülése esetén simán jelenjenek meg, majd simán eltűnnek.
Az osztály késleltetés-05-ös és késleltetési-1-ek felelősek az animáció lejátszásának késleltetéséért 0,5 másodpercig és 1 másodpercig. Nézzük az ezekhez az osztályokhoz hozzárendelt tulajdonságokat:
Ezzel a munkával befejeződött a stíluslap, a következő szkriptet kell elhelyeznünk a záró testcímke előtt
Ügyeljen a vonalakra:
Ezekben hozzáadunk és eltávolítunk olyan osztályokat, amelyek felelősek az animációs stílusokért, amelyeket görgetéskor játszanak le. Ebben az esetben fadeInUp és fadeOutDown. Választhat bármilyen animációt a animate.css könyvtár hivatalos oldalán.
Az animáció kezdőpontjának megváltoztatásához módosítsa az offset értéket. Ebben az esetben 80% -ot állít be. Ahogy én megértem, ez a távolság a képernyő tetejétől az animált blokkig.
Többször megkérdeztem, vajon van-e lehetőség arra, hogy a távolságot az animáció kezdetétől százalékban határozzuk meg, mert a monitorok mindegyike más. E hatás korábbi verziójában ez nem lehetséges százalékban. Emiatt voltak bizonyos problémák.
Ebben az esetben ez a probléma megoldódott. Az első eltolás felel az animáció elindításáért. És a második a blokkok eltűnéséhez. Vagyis, amikor lehetetlen 50 pixel animált tartalmat látni. Próbálja ki! Egy példára mindent meg fogsz érteni.
P.s. A Waypoint frissítve lett a 3.0-s verzióra, így nincs értelme a Github letöltésében. Nem hatoltam be, de úgy tűnik, a változások olyan drámaiak voltak, hogy ez a szkript nem működik megfelelően az új verzióval. Ezért a forrás a 2.0 verzió. Ő vele minden jól működik.
Ez érdekes:
- Hogyan oldhatjuk meg a webhely fejlécét oldal görgetésekor
- Költségcsapás. Egy másik kiváltó, amely növelheti a konverziót
- Hogyan lehet lezárni a külső hivatkozásokat az indexelésből?
