2 510 Уже довольно давно очень популярны сайты с так называемым эффектом параллакса. Если вы еще не слышали о параллаксе и не очень-то представляете, что это такое, в двух словах его можно описать как эффект, позволяющий прокручивать разные слои в разных направлениях или с разной скоростью. Параллакс очень здорово справляется с созданием оптической глубины, привлекая и удерживая внимание посетителя сайта.
В веб-дизайне проще всего достичь эффекта параллакса использованием плагина jQuery. Однако, это связано с некоторыми неудобствами. Этот плагин чаще всего способствует возникновению проблем со scroll-ингом объектов. Чтобы прокрутка была плавной, JavaScript должен обрабатывать тонны событий (а это влечет за собой проблемы с отображением; стоит хорошо подумать, прежде чем использовать его). Для того, чтобы слои перемещались, и при этом перемещались плавно, нужно провести массу вычислений и пересчетов относительно размещения объектов и элементов, а это, в свою очередь, вынуждает проводить огромное количество манипуляций с DOM.
Короче говоря: параллакс на базе JavaScript гарантированно влечет за собой проблемы с плавным скроллингом сайта.
background-position: fixed спешит на помощь!
Немногие знают, что создать эффект параллакса можно с помощью CSS. Смотрите, к примеру:
П
Для получения эффекта параллакса, фоновые изображения должны быть размещены в различных элементах. Эти элементы дополнительно должны быть определены как background-attachment: fixed. Используя background-attachment, поведение и расположение любого фонового изображения возможно будет изменить.
Основной интерес представляет прокрутка, которая, как правило, подразумевает, что расположение изображения фиксировано относительно его элемента. В этом нет ничего фантастически нового, мы все знаем, как это работает. Пользователь прокручивает сайт, элементы двигаются вверх и вниз, и фоновые изображения также двигаются вверх и вниз.
Всё становится гораздо интереснее, когда мы используем background-attachment в свойстве fixed. fixed означает, что фоновые изображения не фиксируются относительно элементов, а закреплены относительно области просмотра. То есть, независимо от прокрутки изображение остается на своей позиции.
Всё это приводит к созданию прекрасного параллакс-эффекта.
Давайте очень кратко рассмотрим, как это работает, на практике:
|
1 2 3 4 5 6 7 8 9 10 |
<!-- Four containers for setting the background images --> <div class="parallax"> <div class="bg__foo">foo</div> <div class="bg__bar">bar</div> <div class="bg__baz">baz</div> <div class="bg__bazz">bazz</div> </div> // setting base styles to image containers [class*="bg__"] { height: 50vh; |
|
1 |
text-indent: -9999px; |
|
1 2 |
/* fix background */ background-attachment: fixed; |
|
1 2 |
/* center it */ background-position: center center; |
|
1 2 |
/* Scale it nicely to the element */ background-size: cover; |
|
1 2 3 4 5 |
/* just make it look a bit better ;) */ &:nth-child(2n) { box-shadow: inset 0 0 1em #111; } } |
|
1 2 3 4 5 |
.bg__foo { background-image: url( https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg ); } |
|
1 2 3 4 5 |
.bg__bar { background-image: url( https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg ); } |
|
1 2 3 4 5 |
.bg__baz { background-image: url( https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg ); } |
|
1 2 |
.bg__bazz { height: 100vh; |
|
1 2 3 4 |
background-image: url( https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg ); } |
Быстрая проверка кода относительно поддержки работы браузерами на MDN показывает практически глобальную совместимость. Кроме того, он поддерживается IE9 и Android 2.1.
Подведем итог
Лично я отдаю предпочтение CSS перед JavaScript при создании параллакс-эффекта, и, кажется, теперь легко понять, почему. Нет никаких дополнительных логических задач и манипуляций с DOM, — это очень существенный плюс, согласитесь. Помнить нужно только одно.
Даже работая над созданием параллакса в CSS, остается масса задач для браузера. background-attachment: fixed – нужно делать дополнительную прорисовку для браузера, которая может снизить плавность скроллинга и очень уменьшить ваш FPS. Поэтому не забывайте следить за счетчиком FPS, например, в Chrome, — это значительно облегчит вашу работу.
