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ü.

Fejlesztünk egy animált

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.

Kapcsolódó cikkek