розмітка HTML
Для початку нам знадобляться деяка розмітка HTML, вміст сторінки буде поміщено в section. а також знадобиться ще div. який буде містити фон.
Home page
We are a fairly small, flexible design
.
На розмітці особливо уваги не загострюємо, так як вона потрібна лише для прокрутки сторінки. Переходимо до CSS.
Правила CSS
Правил CSS, необхідних для створення ефекту паралакса, насправді мало. В першу чергу необхідно встановити фонове зображення в div і зафіксувавши, тому що дії прокрутки будуть застосовуватися за допомогою JQuery. Потім ми встановлюємо ширину 100% і висоту 300%. щоб div був більше, ніж висота сторінки. Ми позиціонуємо його в верхньому лівому і, нарешті, дати йому Z-індекс -1 переконатися, що вона виявляється під текстом.
bg # 123;
background. url # 40; 'Bg.jpg' # 41; repeat;
position. fixed;
width. 100%;
height. 300%;
top. 0;
left. 0;
z-index. - 1;
# 125;
Від JQuery ми хочемо домогтися прокрутки фону на більш низькій швидкості, ніж прокрутка основного контенту. Для цього створимо функцію яка буде викликатися під час прокрутки сторінки:
function parallax # 40; # 41; # 123;
var scrolled = $ # 40; window # 41 ;. scrollTop # 40; # 41; ;
$ # 40; '.bg' # 41 ;. css # 40; 'Top', - # 40; scrolled * 0.2 # 41; + 'Px' # 41; ;
# 125;
Спочатку поміщаємо в змінну кількість пікселів прокрутки від початку сторінки. Тепер, щоб зробити прокрутку фону з меншою швидкістю, додаємо до властивості top блоку div значення змінної помножене на коефіцієнт (чим ближче до 0 тим повільніше).
І останній штрих, ця функція викликається під час прокрутки сторінки.
$ # 40; window # 41 ;. scroll # 40; function # 40; e # 41; # 123;
parallax # 40; # 41; ;
# 125; # 41; ;