Начална страница

Ние сме сравнително малък, гъвкав дизайн
.

Markup специално внимание не живее, защото тя се нуждае само да превъртите страницата. Обръщаме се към CSS.

правила CSS

Правилник за CSS, необходими, за да се създаде паралакс ефект, в действителност, това не е достатъчно. Първата стъпка е да зададете фоново изображение в Разделение и фиксиране, защото превъртане действия ще се прилага с помощта на JQuery. Тогава ние се ширината и височината от 100% до 300%. да Разделение е по-голяма от височината на страницата. Ние го позиционира в горния ляв ъгъл, и най-накрая му даде Z-индекс на -1 за да сте сигурни, че това е в рамките на текста.

бг # 123;
фон. URL # 40; "Bg.jpg" # 41; повтори;
позиция. фиксиран;
ширина. 100%;
височина. 300%;
отгоре. 0;
наляво. 0;
Z-индекс. - 1;
# 125;

От JQuery искаме да преминете на фона на по-бавна скорост, отколкото основното съдържание превъртането. За да направите това, да създаде функция, която ще се нарича по време на превъртане на страница:

функция паралакс # 40; # 41; # 123;
Var превъртели = $ # 40; прозорец # 41. scrollTop # 40; # 41; ;
$ # 40; ".bg" # 41. CSS # 40; "Топ", - # 40; превъртели * 0.2 # 41; + 'Px " # 41; ;
# 125;

Първо пускане в променлив брой пиксели от началото на книгата на страницата. Сега, за да се направи на фона превъртане на по-ниска скорост, добавя се в началото имот променлива Разделение на блок, умножена по коефициент (по-близо до 0 по-бавно).

И последен щрих, тази функция се нарича, когато страница свитъка.

$ # 40; прозорец # 41. свитък # 40; функция # 40; д # 41; # 123;
паралакс # 40; # 41; ;
# 125; # 41; ;

Свързани статии

• Rss Krosspocting на лента на стената в VKontakte - статии и уроци за създаване на уеб сайт статия WordPress