Hogyan hozzunk létre egy egyszerű parallaxis hatást, xozblog - tanulságok és cikkek weboldal, blog
HTML-kód
Kezdeni, szükségünk van néhány HTML-jelölést, az oldal tartalma kerül a szakaszban. és szükségünk van egy másik div. amely tartalmazza a háttérben.
Kezdőlap
Mi egy meglehetősen kicsi, rugalmas kialakítás
.
Markup külön figyelmet nem lakik, mert csak meg kell görgetni az oldalt. Azt viszont, hogy a CSS-t.
CSS-szabályok
Szabályzat CSS, szükséges, hogy hozzon létre egy parallaxis hatást, sőt, ez nem elég. Az első lépés az, hogy a háttérképet egy div és rögzítése, mert görgetés intézkedéseket kell alkalmazni a jQuery. Aztán meg a szélessége és magassága a 100% és 300%. a div nagyobb volt, mint az oldal magassága. Mi azt elhelyezni a bal felső, és végül ad neki egy Z-index -1, hogy megbizonyosodjon arról, hogy ez a szöveg alatt.
bg # 123;
háttérben. url # 40; 'Bg.jpg' # 41; ismételje meg;
helyzetbe. rögzített;
szélessége. 100%;
magasságot. 300%;
tetején. 0;
maradt. 0;
z-index. - 1;
# 125;
Tól JQuery szeretnénk görgetni a háttérben egy lassabb sebességgel, mint a fő tartalomra görgetés. Ehhez hozzon létre egy függvényt, amely során kell lehívni görgetés:
funkció parallaxis # 40; # 41; # 123;
var görgetni = $ # 40; ablak # 41;. scrollTop # 40; # 41; ;
$ # 40; '.bg' # 41;. css # 40; 'Top', - # 40; görgetni * 0,2 # 41; + Px " # 41; ;
# 125;
Első helyezett változó számú pixellel az oldal elejére tekercset. Most, hogy a háttérben scroll kisebb sebességgel, add, hogy a blokk tetejére ingatlan div változó szorzóval (minél közelebb a 0 a lassabban).
És az utolsó érintés, ezt a funkciót nevezik, ha az oldal tekercset.
$ # 40; ablak # 41;. felcsavar # 40; függvény # 40; e # 41; # 123;
parallaxis # 40; # 41; ;
# 125; # 41; ;