Cum de a face efectul de parallax simplu și simplu pe CSS + JQuery
Bună ziua tuturor. Astăzi vă voi spune despre un mic script pentru a crea un efect simplu de parallax.
Care este efectul de parallax pe site
Să vorbim mai întâi despre ce este vorba. Deci, efectul de parallax în designul web este o tehnică în care imaginea de fundal se mișcă mai lent decât elementele care sunt deasupra ei. Pentru cei mai experimentați, voi spune că nu vom "lega" efectul de parallax cu cursorul mouse-ului. ci doar să creeze un background parallax. Să începem.
Cum se face efectul de parallax pe site
Deci, mai întâi de toate conectăm biblioteca jquery. Ca de obicei, între etichetele cap:
Acum pregătim construcția HTML:
Apoi, descriem CSS pentru blocurile DIV:
bloc float: stânga;
lățime: 100%;
înălțime: 470px;
overflow: ascuns;
fundal: #ffffff;
margine: 0px 0px 0px 0px;
>
.poziția bloc_parallax: relativă;
lățime: 100%;
înălțime: 100%;
overflow: ascuns;
>
.img_parallax top: 0px;
poziția: absolută;
lățime: 100%;
înălțime: 470px;
>
Bine, în continuare trebuie să adăugăm un script Jquery, care va ridica blocul cu imaginea când îl derulați și îl aruncați împreună cu ecranul.
/ * Derularea derulării * /
$ (fereastră) .scroll (funcție () paralax_winscroll = $ (fereastră) .scrollTop ();
paralax_winheight = $ (fereastră) .height ();
paralax_docheight = $ (document) .height ();
/ * Dacă ecranul ajunge în partea de sus a blocului, imaginea va fi atașată în partea superioară a ecranului * /
dacă ($ (acest) .scrollTop ()> cord.top ((winscroll + winheight)
>);
>);
În acest sens, în principiu, puteți termina.
Articole similare
Trimiteți-le prietenilor: