Hogyan készítsünk egy animált fedél felhelyezése és honlap CSS3 és jQuery
Úgy gondolom, hogy sokan észre, hogy a trend most is egyre több összetartó design elemek maradnak a szem előtt, amikor a felhasználó görgetni az oldalt. Mivel véleményem szerint ez nagyon kényelmes, különösen, ha ez honlapján navigációt. Itt egy példa a mai napon, és mi nem. Megtanuljuk, hogyan lehet egy animált cap hely jQuery és CSS3 animáció.
Mint általában, ez történik minimum sornyi kódot, és nagyon egyszerű, és ugyanakkor nagyon hatásos. Nos, most térjünk a leckét.
Ι Demo letöltése
HTML kód nagyon egyszerű, csak be kell állítani a kulcsszó a fejléc az oldalon. továbbá közöttük írni a tartalmát az oldalon:
Mivel ez egy nagyon egyszerű példa, itt tettük egy egyszerű szöveges címkék közötti h1, de ők is használja a kép, vagy például, eligazodást.
jQuery kódot
CSS a legjobb módja, hogy végre animációk és átmenetek abban a pillanatban. Így a script, akkor használja a minimum, majd határoznia a ravaszt animáció görgetés közben.
Ha az érték a helyzet az oldalt, amikor lapozunk nagyobb, mint 1, az azt jelenti, hogy a felhasználó görgetni az oldalt, és kell hozzá egy osztály «ragacsos» címke fejléc az oldalon. Így váltott animációk és rögzített kupakkal oldalon.
És itt van a kód:
Fontos megjegyezni, hogy a jQuery ebben a példában nem jó ötlet, mert ha a böngésző szkriptek, akkor korlátozzák a helyszínen egyszerűen rögzíthető minden.
CSS kódot fog állni 2 részből áll. Az első kód lesz felelős a standard cap hely található, amely az alapértelmezett helyzetbe. A második kód lesz felelős feltérképezése sapkák, amikor a felhasználó görgetni az oldalt. Lássuk, hogy a kód így néz alapértelmezés szerint:
Most a legérdekesebb dolog: ha a felhasználó görgeti le az oldalt, akkor az osztály fogja alkalmazni .sticky, amit lehet határozni egy teljes mértékben változatos kijelző, amelyre csak akkor tudja CSS. Azt is meg egy fix helyzetben, amely lezárná honlapunkon mindig a láthatáron.
Ezekkel CSS szabályokat, amelyek az alábbiakban szeretnénk csökkenteni a térségben a legtöbb sapkák görgetve, változtatni a színét, és természetesen csökkenti a font. Itt a kód maga:
Ez a legegyszerűbb példát, amelyben akkor meg kell érteni a lényegét a munkát. Minden attól függ, a design a webhelyen.
Most adjunk néhány animációt a mi átmeneti használatával átmenet. Itt a kód:
Ι Demo letöltése
következtetés
Ennyi :) Bye bye. )