Параллакс эффект в CSS

| Категории: HTML5
Анна Аминева

Иллюстрация блокнота

Параллакс эффект прокрутки страницы

Существует несколько путей создания параллакс эффекта при прокрутке страницы. Большинство примеров, которые вы найдете на StackOverflow или на подобных сайтах, содержат отдельно двигающиеся слои или дивы, движение которых инициируется jQuery- обработчиком события onscroll данного документа.

Эта статья описывает наиболее эффективный путь решения проблемы, который позволяет достичь высокой производительности и сделать код разметки семантически понятным и более простым в поддержке.

История появления параллакс эффекта

Для начала немного слов о параллакс эффекте прокрутки
Параллакс эффект- старая технология симуляции глубины вида в компьютерных играх. Она стала популярной в 1982 года, с появлением первой игры («Moon Patrol»), в которой данный эффект был применен на практике. Основная идея заключается в том, что объекты, которые находятся дальше движутся медленнее по отношению к объектам, находящимся ближе и воспроизводя данный эффект, мы можем получить аналогичное ощущение 3D на наших двумерных экранах.

Приветствуем CSS3 и TranslateZ

Сейчас у нас есть сильные встроенные инструменты в CSS3, которые позволяют нам обращаться к GPU напрямую и, вместо использования JS для управления нашими элементами по одному, мы можем управлять ими, изменяя всего лишь один параметр, а это значит- лучшую производительность и быстродействие.

Проблема мобильных устройств с эффектом parallax

К сожалению, все еще нет ни одного хорошего способа воспроизвести данный эффект на мобильных устройствах по той причине, что событие “scroll” происходит только в тот момент, когда вы закончили прокручивать контент. Это происходит потому, что во время прокрутки GPU всего лишь двигает “скриншот” экрана.

Решение для легкого создания параллакс эффекта

Основной фокус в том, чтобы расположить каждый элемент с корректным Z индексом относительно нормальной глубины (которая равна 0),
translateZ: -30px
Добавьте глубины к вашему элементу body

body{ -webkit-perspective: 500; -webkit-perspective-origin: 0 0; }

Теперь осталось только обновитель исходную точку обзора в момент прокрутки страницы. Это значит, что все элементы будут двигаться индивидуально с помощью графического процессора, а такты центрального процессора не будут впустую тратиться на обработку анимации. Поскольку вы двигаете угол обзора, вы можете также использовать этот метод, чтобы показывать реальные 3D: графики, точки на карте, тени, отражения или другие классные вещи, которые вы сможете придумать.

После того как вы примените верную глубину для ваших элементов, просто добавьте эту строчку для обработки изменения точки обзора:

1
2
3
4
5
html5
<script>    
window.onscroll = function(){     
document.body.style.webkitPerspectiveOrigin =  window.scrollX + "px " + window.scrollY + "px";     
} </script>

Demo parallax

Работающая демо версия в webkit - метод, который поддерживается всеми основными браузерами с HTML5 (IE10+, Safari, Chrome и Firefox). Сейчас демо-версия оптимизирована под Webkit, но я планирую, чтобы она работала и в остальных браузерах:
[Demo] (http://codepen.io/irony/full/gIhky)

Удачи в работе с гипнотическими эффектами!