Fejlesztünk egy animált "ragacsos" fejlécet css3 és jquery használatával
Ez a tendencia az oldallapokkal kezdődött, de ma népszerűsége nőtt a honlap fejlécéig. Miért? Mert gyakran a fejléc szakaszokban van egy navigációs menü.
Vessünk egy pillantást a fejlődésre, amit ma meg fogunk csinálni.
Ha a kézikönyvben a kódot követni szeretné, a teljes kód itt tölthető le.
A példánk HTML-je elég egyszerű. Csak a fejlécben van h1. Alatta van egy kép, amely arra kényszeríti a látogatókat, hogy gördítsék az oldalt, ami lehetővé teszi számunkra, hogy teszteljük a hatást.
A CSS átmenetek a legjobb módja annak, hogy ellenőrizzük az animációt, amelyet fel kell használni a tapadós fejlécrészre. Minden, amit jQuery for használunk, a görgetési pozíció meghatározása.
Ez azt jelenti, hogy képes lesz a stílus a fejléc rész alapján az osztály „ragadósak”, hogy alkalmazzák.
Fontos megjegyezni, hogy ebben a példában a jQuery nagyon jól segít, de van egy kiváló mentési lehetőség. Ha a j # 097-et támogatják, az író parancs le van tiltva, a navigáció továbbra is működni fog, mivel a fejléc formátuma a webhely szokásos fejlécrésze lesz.
A CSS kódunk két különböző pozíciót stilizál: az alapértelmezett pozíciók és a pozíciók "ragacsosak". És e két pozíció között nincs átmenet.
Először írjunk néhány egyszerű stílust, amelyek javítják fejlécrészünk megjelenését:
Most lépjünk át a legérdekesebbre: amikor a felhasználó lapozzon az oldalra, az osztály "ragacsos" kerül a fejlécre, és most már megvan a lehetősége arra, hogy másképp alakítsuk ki, újragondolva a figyelem elsőbbségét az oldalon. Azt is megadjuk, hogy a helymeghatározás ne változzon meg.
Itt több dolgot kell megtenni: először is meg kell változtatnunk a méretet, ami lehetővé tenné számunkra, hogy kevesebb helyet foglaljunk a képernyőn. Szintén módosítania kell a színt, és állítsa be a beállítást balra, hogy ez az elem ne zavarja a felhasználókat vizuálisan:
Általánosságban az, hogy mi döntesz itt, attól függ, hogy milyen tervet kell kapnia. És így mindent megtesz, amit akarsz, persze.
Ha most teszteljétek, mi történik, látni fogja, hogy a fejlécrész megváltozik, amikor az oldal gördül.
Most, hogy ezeket a változásokat animáljuk, mindössze annyit kell tennünk, hogy az átmenetet állítsuk be a fejlécre:
Az a képesség, hogy használja a CSS3-funkciók és kapcsolja osztályok jQuery, hogy dolgozzon animált fejléc részei vált hihetetlenül egyszerű feladat.
Egyébként megjegyezzük, hogy a kód tökéletesen illeszkedik a különböző helyzetekhez.