Hogyan készítsünk parallaxis hatást gyorsan és egyszerűen a css
Hogyan lehet a parallaxis hatás egyszerű és könnyen CSS + Jquery
Hello mindenkinek. Ma megmondja, hogy egy kis script, hogy egy egyszerű parallaxis hatást.
Mi a parallaxis hatást a helyszínen
Nézzük először beszélni, mi ez az egész. Így a parallaxis hatást web design - egy olyan technika, amelyben egy háttérképet lassabb, mint az elemek, amelyek rajta. További tapasztalt mondják, hogy mi nem „bind” parallaxis hatást az egér kurzor. csak hozzon létre egy parallaxis háttérben. Folytassuk.
Hogyan készítsünk parallaxis hatást az oldalon
Tehát, először csatlakoztassa a jQuery könyvtár. Mint általában, a címkék fej:
Most megépítésének előkészítését HTML:
Ezután leírja a CSS a DIV blokk:
blokk float: left;
szélesség: 100%;
magasság: 470px;
overflow: hidden;
háttér: #ffffff;
margin: 0px 0px 0px 0px;
>
.block_parallax helyzet: a relatív;
szélesség: 100%;
magasság: 100%;
overflow: hidden;
>
.img_parallax top: 0px;
pozíció: abszolút;
szélesség: 100%;
magasság: 470px;
>
Oké, akkor mi kell hozzá JQuery szkriptet, amely felveszi a blokk a kép, ha a görgetés és dobja meg a képernyőn.
/ Görgetés * A pálya * /
$ (Ablak) .scroll (függvény () paralax_winscroll = $ (ablak) .scrollTop ();
paralax_winheight = $ (ablak) .height ();
paralax_docheight = $ (document) .height ();
/ * Ha a képernyő elérte a felső határt, akkor a blokk képet csatolni kell a képernyő tetején * /
if ($ (this) .scrollTop ()> cord.top ((Winscroll + winheight)
>);
>);
Ezzel szemben elvileg lehetséges, hogy befejezze.
