Hogyan készítsünk egy fix menü animációk görgetés esetén - onetwostudy - Ingyenes video órákat
Egy kis megjegyzés a stílus:
header van olyan helyzetben: fix; és megakad a képernyő felső részén;
nav használatra flexbox;
A logó általunk megadott margó: margin-top: 50px. margin-left: 50px. padding: 20px 30px;
margó szakaszok margin-top: 50px és margin-right: 50px;
Mobile változata a menü ikon rejtett és csak akkor jelenik meg, ha a képernyő felbontása alábbi 1061px;
Azt is hozzá egy átmeneti átmenet simább működését.
Hozzátéve animáció a menü
Mielőtt add animáció Étlapunkon, meg kell figyelni, hogy a következő pontokat:
- mivel a menü mereven rögzítve van az oldal tetején, van egy határozott magassági mérete. Ennek következtében a főbb tartalommal kell alatt található a menüben, de nem fedik egymást.
- és a mi menü animirvatsya görgetés esetén. A mi esetünkben ez lesz kissé csökkent méretűek.
Először is határozzuk meg a magassága a menüt, és adjuk hozzá a megfelelő padding a tartály a fő tartalomra.
teljesítmény callbackFunc
Néhány szó a teljesítményt. Ha hívjuk a scroll callbackFunc. Ez azt jelenti, hogy a funkció lehet nevezni sokszor egy munkamenetben. A mi egyszerű animáció felhasználó nem lát terhelést, de mi van, ha ez az esemény lesz függesztve bonyolultabb dolgokat? Ebben az esetben meg kell, hogy vigyázzon a teljesítményt.
A legegyszerűbb módja az, hogy hozzon létre egy késedelmes teljesítést a funkciót.
A mi verzió alkalmas kezelhető gázkar könyvtárban.
Ebben az esetben a funkció kell, hogy kis változások. sor
ablakot. addEventListener ( "scroll" callbackFunc.);
kell helyettesíteni
ablakot. addEventListener ( "scroll" _ fojtószelep (callbackFunc 200) ...);
Most a funkció kerül meghívásra nem gyakrabban, mint egyszer minden 200 ms (ez önkényes, és meg lehet változtatni a saját).
A jobb érthetőség kedvéért, a jobb oldalon a képernyő már feltöltött számláló funkció hívást. Próbálja ki a demo segítségével késedelem nélkül látni a különbséget.
A mai leckében meglehetősen egyszerű, Erôsítsük ismeretek felhasználásáról szóló pszeudo CSS. Ehhez ...
Webhelyén, akkor egy modern és meglehetősen informatív kördiagram. Esélye van ...
A mai leckében megnézzük néhány-a CSS animáció opciót ikonok burger menü. Hamburger menü vált szokás tulajdonság ...