Pagina principală

Suntem un design destul de mic, flexibil
.

Pe marcaj, atenția specială nu este focalizată, deoarece este necesară numai derularea paginii. Să trecem la CSS.

Reguli CSS

Regulile CSS necesare pentru a crea un efect de parallax sunt de fapt mici. Mai întâi, trebuie să setați imaginea de fundal în div și să o reparați, deoarece acțiunile de defilare vor fi aplicate folosind jQuery. Apoi am stabilit lățimea la 100%, iar înălțimea la 300%. astfel încât div este mai mare decât înălțimea paginii. Poziționăm-o în stânga-sus și, în cele din urmă, îi dă indexul Z -1 pentru a ne asigura că este sub text.

bg # 123;
fundal. URL-ul # 40; 'Bg.jpg' # 41; se repetă;
poziție. fixe;
lățime. 100%;
înălțime. 300%;
top. 0;
la stânga. 0;
z-index. - 1;
# 125;

Din jQuery dorim să realizăm o derulare de fundal la o viteză mai mică decât derularea conținutului principal. Pentru aceasta, creați o funcție care va fi apelată atunci când pagina este derulată:

funcția paralaxă # 40; # 41; # 123;
var scrolled = $ # 40; fereastră # 41;. scrollTop # 40; # 41; ;
$ # 40; '.BG' # 41;. css # 40; "sus", - # 40; derulat * 0,2 # 41; + 'px' # 41; ;
# 125;

Mai întâi, am plasat numărul de pixeli de defilare de la începutul paginii în variabila. Acum, pentru a face ca fundalul să deruleze la o viteză mai mică, adăugați valoarea variabilei înmulțită cu coeficientul cu proprietatea de sus a blocului div (cu cât este mai apropiat de 0 cu cel mai lent).

Și atingerea finală, această funcție este numită în timpul derulării paginii.

$ # 40; fereastră # 41;. sul # 40; funcție # 40; e # 41; # 123;
papalaxă # 40; # 41; ;
# 125; # 41; ;

Articole similare

• Postarea încrucișată din banda rss la perete în vkontakte - articole și lecții de creare a site-urilor pe articolele wordpress

Trimiteți-le prietenilor: