Background Image

Параллакс-эффект на сайте

Web design

by — Category Web design on

Параллакс-эффект на сайте

Параллакс (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, невозможно. Кроме того, данный стандарт поддерживается не всеми современными браузерами. Поэтому и здесь есть свои сложности.

 

Вывод

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

 ПРОВЕРЕНО!


Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Сколько стоит создать сайт в интернете?

    Сколько стоит создать сайт в и...

    Сколько стоит создать сайт? Вполне насущный вопрос, ...

    View More
    0 770 10:36
    Как сделать сайт визитку самостоятельно?

    Как сделать сайт визитку самос...

    Визитка – самый простой в плане технической ре...

    View More
    0 406 23:22
    SEO-оптимизация и продвижение сайтов

    SEO-оптимизация и продвижение ...

    Продвижение сайта – это проце...

    View More
    0 295 23:29
    Самые популярные приёмы в дизайне веб-портфолио

    Самые популярные приёмы в диза...

    Мы выбрали 10 популярных приёмов, хотя бы один из ко...

    View More
    1 299 21:43
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu