Вже досить давно дуже популярні сайти з так званим ефектом паралакса. Якщо ви ще не чули про паралаксі і не дуже-то уявляєте, що це таке, в двох словах його можна описати як ефект, що дозволяє прокручувати різні верстви в різних напрямках або з різною швидкістю. Паралакс дуже здорово справляється зі створенням оптичної глибини, залучаючи і утримуючи увагу відвідувача сайту.
background-position: fixed поспішає на допомогу!
Мало хто знає, що створити ефект паралакса можна за допомогою CSS. Дивіться, наприклад:
Для отримання ефекту паралакса, фонові зображення повинні бути розміщені в різних елементах. Ці елементи додатково повинні бути визначені як background-attachment: fixed. Використовуючи background-attachment. поведінку і розташування будь-якого фонового зображення можливо буде змінити.
Основний інтерес представляє прокрутка, яка, як правило, має на увазі, що розташування зображення фіксоване щодо його елемента. В цьому немає нічого фантастично нового, ми все знаємо, як це працює. Користувач прокручує сайт, елементи рухаються вгору і вниз, і фонові зображення також рухаються вгору і вниз.
Все це призводить до створення прекрасного паралакс-ефекту.
Давайте дуже коротко розглянемо, як це працює, на практиці:
Швидка перевірка коду щодо підтримки роботи браузерами на MDN показує практично глобальну сумісність. Крім того, він підтримується IE9 і Android 2.1.
Підведемо підсумок
Можливо, Вам буде цікаво ↓↓↓
- 25 цікавих сайтів з паралакс-прокруткою
- Слайдер з ефектом паралакса на jQuery
- Сучасні техніки CSS3 для прикраси вашого сайту
- Гарне оформлення списку на CSS3 і jQuery
Заробіток на сайті
Популярні статті
Останнє з «CSS # 038; HTML»
