Параллакс-эффект на сайте
Параллакс (Parallax, греч. смена, чередование ) – это изменение видимого положение объекта по отношению к удаленному фону в зависимости от нахождения наблюдателя. Первостепенно этот термин употреблялся для природных явлений, в астрономии и геодезии. Например, вот такое смещение солнца относительно столба при отражении в воде и есть параллакс в природе.
В веб-дизайне параллакс-эффект или параллакс-скроллинг – это специальная техника, когда фоновое изображение в перспективе двигается медленнее, чем элементы переднего плана. Эта технология применяется все чаще, так как выглядит действительно эффектно и круто.
Достигается такой эффект трехмерного пространства с помощью нескольких слоев, которые накладываются друг на друга и при прокручивании движутся с различной скоростью. С помощью такой технологии можно создать не только искусственный трехмерный эффект, можно применять ее к иконкам, изображениям и другим элементам страницы.
Пример эффекта параллакс на чистом CSS
Разметка HTML
<article>
<div class='parallax'><div class='foo_b'></div>
<div class='foo_c'></div>
<div class='foo_a'></div>
<div class='foo_d'></div>
<div class='foo_e'></div>
<div class='foo_r'></div>
<div class='foo_s'></div>
<div class='foo_t'></div>
</div>
</article>
CSS код
body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}.parallax div{
background-attachment: fixed;
height: 90vh;
text-indent : -9999px;
background-position : center center;
background-size : cover;
&:nth-child( 2n ) {
box-shadow : inset 0 0 1em #111;
}
}
.foo_a { background-image : url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg); }
.foo_b { background-image : url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg); }
.foo_c { background-image : url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg); }
.foo_d { background-image : url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg); }
.foo_e { background-image : url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg); }
.foo_r { background-image : url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg); }
.foo_s { background-image : url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg); }
.foo_t { background-image : url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg); }
Недостатки параллакс-эффекта
Основной минус параллакса – это проблемы с производительностью сайта. Выглядит все красиво и стильно, но применение javascript/jQuery, с помощью которых и создается эффект параллакса, в значительной степени утяжеляет страницу и очень снижает скорость ее загрузки. Это происходит потому, что в его основе лежат сложные вычисления: javascript приходится контролировать положение каждого пикселя на экране. В некоторых случаях ситуация осложняется еще и проблемами с кроссбраузерностью и кроссплатформенностью. Многие разработчики рекомендуют использовать параллакс-эффект применительно к максимум двум элементам страницы.
Альтернативное решение
С появлением CSS3 задача немного упростилась. С его помощью можно создать очень похожий эффект, который будет намного экономичнее в плане ресурсозатрат. Суть в том, что контент сайта размещается на одной странице, а перемещение по под-страницам происходит методом CSS3-перехода. Это тот же параллакс, но с некоторым отличием: дело в том, что достичь того, чтобы перемещение осуществлялось с различной скоростью, используя только CSS3, невозможно. Кроме того, данный стандарт поддерживается не всеми современными браузерами. Поэтому и здесь есть свои сложности.
Вывод
Эффект параллакса хоть и популярен, но далеко не все спешат его использовать при создании сайта по причине выше озвученных проблем. Видимо, пока просто необходимо время, чтобы технологии смогли преодолеть возникшие трудности. А пока такой вариант можно использовать на сайтах-одностраничниках: так он точно запомнится и сумеет удержать пользователя.
ПРОВЕРЕНО!
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
| Feedback: 0 | |