Animált navigációs sáv
Animált navigációs sáv
Ebben a leírásban megmutatom, hogyan lehet egy animált navigációs sáv a webhelyen. Ez a panel lesz jelölt, ha az egeret fölé egy kis része látható egy időben változó háttér színe, és tolja vissza, ha elveszi tőle az egérmutatót. És ez fog menni a „ugrál” egy animált hatást. És ami a legfontosabb - akkor megtudjuk, plug-inek, amellyel egy ilyen panel nagyon egyszerű.
Ma megmutatom, hogyan kell egy új panel egy bonyolultabb és érdekesebb animáció. És akkor megtudjuk, két plugins jQuery, amely megteremti az animáció könnyedén. Azt hiszem, meg fogja találni az ilyen animált panel az oldalakon a weboldal vagy blog.
Tekintse meg a minta akcióban akkor kattintson az ikonra „Demo” az elején a leckét, és töltse le az összes forrás fájlokat, akkor kattintson az ikonra „forrás”.
Most kezdjük!
1. Először fogok létrehozni egy egyszerű html-oldalt. Ez az oldal a címkék között mi fog kapcsolódni a fej táblafájlok «animate_style.css» stílust, amely létrehoz később. ugyanaz a HTML-fájl maga fogom tartani a nevét «animate.html».
Az oldalon megadott főcím a div a mi navigációs sáv. A példában azt használja referenciaként a képemet panel. Én már elő őket a Photoshop. A kép legyen az azonos méretű (én például azok a 70 70 px). Megtalálhatja őket a kiindulási anyagok «kép» mappába, vagy készítsen, és használja a képet, továbbá forgalomba őket egy mappát a «kép» nevét.
Mutasson az egérrel a szalag bal szélén a lap
Ha megnézzük mi az oldal böngészőben, akkor ezen a ponton fog kinézni:
2. Nézzük most létre egy stíluslap fájlt «animate_style.css» nevet és helyezze el ugyanabban a könyvtárban, mint a html-fájlt (ha lesz helyezve egy stíluslap fájlt egy külön mappába, meg kell változtatnod az elérési útvonalat a HTML- fájl).
Most írunk néhány stílus a web oldalon, hogy úgy tűnjön szebb, és készítse el a fiókban animáció.
A következő kód stílusok oldal elemeit láthatjuk a szabályokat a rendszer elemek és ad nekik egy bizonyos stílust. Azt is díszítik a címkéket és néhány blokk árnyékok (létrehozásáról szóló árnyékok itt olvasható segítségével CSS3).
De a legnagyobb a figyelmet, hogy a stílus az elem az ID «műszerfal». mert ezek a stílusok elrejteni fedél képet, így csak a széle a látóteret.
Tehát a kódot a stíluslap fájl:
Ha kinyitjuk a web böngésző, látni fogja, hogy alkalmazni a stílust, a képek a panel el van rejtve, és látjuk, csak a szélén.
Előkészületek kész. Első programozás.
De most minden rendben van.
Először csatlakoztassa a könyvtár jQuery és beépülő modulok. Ezek a fájlok megtalálhatók a forráskódját a leckét a «js» mappát. Hozzon létre egy jól az ő katalógus, ami html-irattartó «js» és másolja a fájlokat, hogy: «jquery-1.6.3.min.js», «jquery.easing.1.3.js» és «jquery.color. js ».
Most, a fej címkék egy html-fájl, amint a kapcsolat stylesheet csatlakozni a három fájlt:
És most, csak miután a kapcsolat a három fájl (könyvtár és pluginek), csatlakozzon a html-oldalt, és az a fájl.
4. Ide «animate.js» fájlt, és írjuk a kódunkat.
Kezdjük írásban a kódot az alábbi sorokat:
Most arra van szükség, hogy válasszon ki egy elemet, amely felelős a fiókot. Ez a tétel egy név «műszerfal». Egy elem akasztunk funkció «hover ()», hogy úgy paraméterként két névtelen funkciókat. Egyikük lesz felelős az akció, amikor az egérmutatót a szélén a panel; A másik - az intézkedések, ha eltávolítjuk a mutatót.
$ (Document) .ready (function ()<$('#dashboard').hover( function()<>, funkció ()<> ); // vége a légpárnás funkció ()>); // végén a kész () függvény
Eddig a funkció nem csinál semmit, mert a paramétereit (névtelen függvény) nem tartalmaznak semmilyen parancsot - azok üresek. Nézzük erősít ez.
Első lépések felírni a helyzet, amikor az egér kurzor a navigációs sáv. Fogjuk használni a «élő ()» együtt az index «ez» ( «ez» kifejezés oldalelem, amely csatlakozik az esemény - ebben az esetben, hogy blokkolja a navigációs sáv).
A funkció adunk három érv: az első - objektum állandó, amely meg fogja változtatni a helyét az egység viszonyítva a bal széle (és egyszerűen nyomja meg a panel), és változtatni a színét a panel is (ez lehetséges a segítségével plug-kapcsolt korábban); második - létrehozása animáció ideje (500 milliszekundum); harmadik - meghatározott típusú animáció «easeInSine» használatát (ez az animáció köszönhető a csatlakozódugó).
Ha most frissíteni kell az oldalt a böngészőben, és mozgassa az egérmutatót a szélén a panel, akkor láthatjuk, hogy ez a felhozott simán, változó színű.
Már jól! De szükség van, hogy a panel is mozgott, amikor figyelembe vele a kurzort. Ehhez meg kell regisztrálni a csapat a második névtelen függvényt.
Ahogyan már felírt kód központ bővítése, írunk elő a kódot úgy, hogy háttérbe szorult, de itt használjuk a hatása „ugrál” (mintha a zadvizhenii navigációs sáv eléri a szélét, pattog, majd teljesen behúzva), növekedés az animáció és visszatér a szín és a helyét a panel az eredeti állapotába.
Most minden nagyon szép munka. Meg tudja nézni a böngészőt. Volt egy kis probléma: ha elkezd gyorsan vezetni az egérrel ide-oda, irányítja és eltérítették a panelt, majd megállt, és előfordulhat, hogy egy ideig, a panel mozgatható és ki anélkül, hogy a felhasználó cselekedeteiért. Ez abból adódik, hogy az animációs hatást sorban áll és több egérmutatót létrehoz egy hosszú listát a hatásokat.
A helyzet orvoslása érdekében szükséges a «ez» és «animálni» regisztrációhoz funkció «stop ()». Ez meg fogja oldani a problémát.
Így a végleges változata a kód a következő lesz:
Ez igaz, csak 24 sornyi kódot (kevesebb lesz, ha nem írok minden erről a sorba), és van egy látványos animációs panel.
Azt hiszem, akkor biztos, hogy megtalálja az ilyen panelek a webhelyen.
Nos, ez valószínűleg az összes. Sok szerencsét a barátok és a kreatív ötleteket!