Як зробити паралакс ефект легко і просто на CSS + Jquery
Всім привіт. Сьогодні розповім вам про невеликий скрипті для створення простого parallax ефекту.
Що таке паралакс ефект на сайті
Давайте спочатку розповім про те, що це взагалі таке. Отже, паралакс ефект в веб дизайні - це такий прийом, при якому фонове зображення рухається повільніше, ніж елементи, які знаходяться над ним. Для більш досвідчених обмовлюся, що ми не будемо "прив'язувати" ефект паралакса до курсора миші. а просто створимо parallax фону. Приступимо.
Як зробити паралакс ефект на сайті
Отже, в першу чергу підключаємо бібліотеку jquery. Як завжди, між тегами head:
Тепер підготуємо конструкцію HTML:
Далі опишемо CSS для DIV блоків:
block float: left;
width: 100%;
height: 470px;
overflow: hidden;
background: #ffffff;
margin: 0px 0px 0px 0px;
>
.block_parallax position: relative;
width: 100%;
height: 100%;
overflow: hidden;
>
.img_parallax top: 0px;
position: absolute;
width: 100%;
height: 470px;
>
Окей, далі нам потрібно додати Jquery скрипт, який буде підхоплювати блок із зображенням при скролінгу і опускати його разом з екраном.
/ * Відслідковуємо скролінг * /
$ (Window) .scroll (function () paralax_winscroll = $ (window) .scrollTop ();
paralax_winheight = $ (window) .height ();
paralax_docheight = $ (document) .height ();
/ * Якщо екран дійшов до верхньої межі блоку то зображення буде прикріплено до верхньої межі екрану * /
if ($ (this) .scrollTop ()> cord.top ((Winscroll + winheight)
>);
>);
На цьому, в принципі, можна закінчувати.
