Bevezetés a jQuery görgetéshez
A web minden nap változik. Új technikák jelennek meg és tűnnek el. Ezért a webes tervezőknek és a front-end fejlesztőknek ismerniük kell a web design legújabb trendjeit.
A parallax effektussal történő görgetés, a rögzített fejlécek, az egyoldalas webhelyek és az animációk a webdesign egyik forró iránya.
Ebben a cikkben megnézzük az oldalra görgető animációkat és hatásokat a CSS és a jQuery alapján.
Mielőtt elkezdi végrehajtani a hatásokat, menjünk át egy kis bevezetést.
Milyen hatások és görgetéses animációk?
A görgető animációk egy új, elterjedési technika, amely lehetővé teszi egy front-end fejlesztő számára, hogy gazdag és interaktív környezeteket hozzon létre. Ezek akkor kezdődnek, amikor a felhasználó lapoz az oldalra.
Annak megállapításához, hogy a felhasználó lapozik-e az oldalra, a jQuery esemény görgetését () használjuk.
Annak tudatában, hogy a felhasználó lapozik az oldalra, a scrollTop () metódus jQuery módszerével meghatározhatjuk függőlegesen a görgetősáv helyzetét. és alkalmazza a kívánt hatást:
Alkalmazkodóak?
Ha adaptív scroll effektusokat kell végrehajtanunk, akkor a következő tulajdonságokat kell megadnunk:
- Böngésző tulajdonság szélessége;
- A böngészőablak magassági tulajdonsága.
Ezeknek a tulajdonságoknak a hiányában a tekercs hatása "statikus" lesz, és nem fog megfelelően működni, ha a felhasználó függőlegesen vagy vízszintesen módosítja az ablakméretet.
Ezek az értékek könnyen elérhetõk a szélesség () és a magasság () magassági jQuery módszerével.
A következő kódrészlet bemutatja a görgetési hatás végrehajtásához szükséges ellenőrzéseket.
Most, hogy a gördülő hatások alapjairól döntöttünk, négy példán alapuló akciót nézzük.
Az egyszerűség érdekében csak arra koncentrálunk, hogy ellenőrizzük, hogy a hatások a szélesség és magasság ablak tulajdonságainak különböző értékeitől függenek-e.
Ez a hatás akkor lép életbe, ha a gördítősáv felső pozíciója meghaladja a 60px értéket. Ebben az esetben a végrehajtható kódfájl így néz ki:
A fenti kód elrejti a h2 elemet egy .banner osztályú elemből. és megjeleníti a gyermek .info elemet. amely eredetileg rejtve van.
Ezt a kódot a következőképpen lehet írni:
A következő példa nem csak a gördítősáv helyzetétől, hanem az ablak szélességétől is függ. Különösen a következő feltételek vannak:
- Az ablak szélessége 549 px vagy kevesebb. Ebben az esetben az animáció csak akkor indul el, ha a gördítősáv pozíciója meghaladja a 600px értéket.
- Az ablak szélessége 550px és 991px között van. Ebben az esetben az animáció csak akkor kezdődik, ha a görgetősáv helyzete meghaladja a 480px értéket.
- Az ablak szélessége több mint 991 px. Ebben az esetben az animáció csak akkor indul el, ha a görgetősáv helyzete meghaladja a 450px értéket.
A fenti esetek kódja az alábbiakban látható:
Az animáció kódja a következő:
A fenti kód animálja az opacitás tulajdonságait. a .clients-info elemek magassága és szélessége.
A harmadik hatás nemcsak a gördítősáv helyzetétől, hanem az ablak szélességétől is függ. Különösen a következő feltételek vannak:
- Az ablak szélessége 549 px vagy kevesebb. Ebben az esetben az animáció csak akkor kezdődik, ha a görgetősáv helyzete meghaladja a 1750px értéket;
- Az ablak szélessége 550px és 991px között van. Ebben az esetben az animáció csak akkor indul el, ha a görgetősáv helyzete meghaladja a 1150px értéket;
- Az ablak szélessége több mint 991 px. Ebben az esetben az animáció csak akkor kezdődik, ha a görgetősáv helyzete meghaladja a 850px értéket.
A fenti esetek kódja az alábbiakban látható:
A végrehajtandó animáció kódja így néz ki:
A fenti kód egymás után megváltoztatja a .method elemek opacitás tulajdonságát. majd megváltoztatja a h4 gyerekek háttérszín tulajdonságát.
Ez a hatás nem csak a gördítősáv helyzetétől, hanem az ablak szélességétől is függ. Különösen a következő feltételek vannak:
- Az ablak szélessége 549 px vagy kevesebb. Ebben az esetben az animáció csak akkor indul el, ha a görgetősáv helyzete meghaladja a 3500px értéket;
- Az ablak szélessége 550px és 991px között van. Ebben az esetben az animáció csak akkor indul el, ha a görgetősáv helyzete meghaladja a 2200px értéket;
- Az ablak szélessége több mint 991 px. Ebben az esetben az animáció csak akkor kezdődik, ha a görgetősáv helyzete meghaladja a 1600px értéket.
Az eredményeket a következő kód:
Az animációs kód a következő:
A fenti kód egymás után animálja az opacitás tulajdonságait. maradt. jobb és alsó elemek p. img. gombot.
következtetés
Remélem, az itt bemutatott példák jól mutatják, hogy a jQuery hogyan használható az animáció és a görgetés hatásainak végrehajtására.
Az információk azonnali megszerzésére két csatorna (látás és hallás) révén a tanítás hatékonysága sokkal nagyobb, mint a könyvek tanulása. És a házi feladatok és az online tesztek lehetővé teszik, hogy folyamatosan gondolkodj a tanult nyelvben, és azonnal ellenőrizd a tudását!
Ha sokáig szeretné megtanulni a HTML-t, akkor remek hírekkel szolgálok neked!
Ha már megtanulta a HTML-t, és tovább akar lépni, a következő lépés a CSS-technológia megtanulása.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!