Проста техніка Parallax Scrolling

Доброго часу доби шановні хабраюзери. На сьогоднішній день Parallax Scrolling є певним трендом і я хочу розповісти про просту реалізацію цього ефекту. Техніка заснована на швидкості зміни властивості background-position. Ефект Parallax Scrolling полягає в тому, що фон рухається повільніше, ніж вміст.

HTML розмітка

Створюємо два блоки з атрибутами "data-type" та "data-speed":

CSS розмітка

Додаємо фонові зображення для елементів з id #home та #about

home-bg.jpg

техніка

about-bg.jpg

Parallax

Стилізуємо самі елементи та їх вміст:

Перебираємо всі елементи з атрибутом data-type="background" :

Додаємо функцію .scroll() всередині .each() , яка викликається при скролінгу:

Обчислюємо коефіцієнт зміни позиції фону при скролінгу:

scrolling

Записуємо значення background-position у змінну та присвоюємо стилі coords :

Хардкорна конфа за С++. Ми запрошуємо лише профі.