Вертикальные параллакс-эффекты при прокрутке страницы с помощью Stellar.js

HTML
02.07.2017
TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте.

Подключаем jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Библиотеку stellar.js качаем здесь, подробную документацию по stellar.js читаем здесь.

Далее подключаем stellar.js для всего документа

$.stellar();

Parallax для элементов

Задаем скорость прокрутки для элементов

<div data-stellar-ratio="2">

Задаем соотношение относительно стандартной скорости прокрутки.
Ratio 0.5 приведет к тому, что элемент будет прокручиваться с половинной скорость,
ratio 1 не будет иметь никакого эффекта,
ratio 2 приведет к тому, что элемент будет прокручиваться с удвоенной скоростью.

Если коэффициент меньше 1 вызывает ошибки в отображении элементов на странице, попробуйте задать для этого элемента position: fixed;.

Parallax для фона

Если необходимо, чтобы фоновое изображение прокручивалось вслед за прокруткой страницы, тогда нужно добавить следующий атрибут:

<div data-stellar-background-ratio="0.5">

Как и в случае с параллаксом элементов, ratio – это соотношение к стандартной прокрутке.

Для коэффициента меньше 1, чтобы избежать ошибок в отображении фона, лучше установить для background-attachment значение fixed.

На мобильных телефонах параллакс для фона лучше не использовать.

Кстати background-attachment: fixed на мобильных так же может не сработать из-за сложности вычислений, поэтому нужно для мобильных (@media (max-width: 768px)) задать background-attachment: scroll.

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

Чтобы параллакс не срабатывал на мобильных устройствах (@media (max-width: 768px)), можно задать для блока свойство background-position: center center !important;.

Когда я тестировал горизонтальный параллакс и Offsets, то у меня возникло много вопросов, но я их отложил на потом и этот плагин использовал только для вертикального параллакса.

Может быть проблемы с IE из-за background-attachment: fixed; – фон может двигаться рывками при скролле.
Нужно использовать отдельные условия для IE:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .next-gen{background-attachment: scroll !important; background-position: 0 0 !important;}
}

Примитивный пример для тестирования

HTML

<div class="block-1" data-stellar-background-ratio=".4"></div>
<div class="block-2 block-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corporis quo ducimus veniam debitis, blanditiis modi voluptatum laudantium nemo inventore veritatis cum, ex dolorem necessitatibus, quae quos nam, molestiae est.</p>
  <p>Ea sint dolor nemo at dicta enim optio omnis molestias voluptatum rem, cumque provident ad eum. Delectus aperiam cumque, dolorum blanditiis, hic error quos reiciendis. Recusandae distinctio voluptas quidem ab!</p>
  <p>Hic magnam eaque, mollitia delectus ullam cum possimus voluptatem. Et in commodi quam, consequatur magnam, dolorum odio tenetur, omnis possimus nihil suscipit. Earum quo, architecto laboriosam quisquam facilis fugit voluptates.</p>
  <img src="https://denis-creative.com/wp-content/uploads/2017/07/sun.png" alt="Sun" class="sun-1 sun" data-stellar-ratio=".4">
</div>
<div class="block-3" data-stellar-background-ratio=".4"></div>
<div class="block-4 block-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corporis quo ducimus veniam debitis, blanditiis modi voluptatum laudantium nemo inventore veritatis cum, ex dolorem necessitatibus, quae quos nam, molestiae est.</p>
  <p>Ea sint dolor nemo at dicta enim optio omnis molestias voluptatum rem, cumque provident ad eum. Delectus aperiam cumque, dolorum blanditiis, hic error quos reiciendis. Recusandae distinctio voluptas quidem ab!</p>
  <p>Hic magnam eaque, mollitia delectus ullam cum possimus voluptatem. Et in commodi quam, consequatur magnam, dolorum odio tenetur, omnis possimus nihil suscipit. Earum quo, architecto laboriosam quisquam facilis fugit voluptates.</p>
  <img src="https://denis-creative.com/wp-content/uploads/2017/07/sun.png" alt="Sun" class="sun-2 sun" data-stellar-ratio="1.4">
</div>
<div class="block-5" data-stellar-background-ratio=".4"></div>
<div class="block-6 block-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corporis quo ducimus veniam debitis, blanditiis modi voluptatum laudantium nemo inventore veritatis cum, ex dolorem necessitatibus, quae quos nam, molestiae est.</p>
  <p>Ea sint dolor nemo at dicta enim optio omnis molestias voluptatum rem, cumque provident ad eum. Delectus aperiam cumque, dolorum blanditiis, hic error quos reiciendis. Recusandae distinctio voluptas quidem ab!</p>
  <p>Hic magnam eaque, mollitia delectus ullam cum possimus voluptatem. Et in commodi quam, consequatur magnam, dolorum odio tenetur, omnis possimus nihil suscipit. Earum quo, architecto laboriosam quisquam facilis fugit voluptates.</p>
  <img src="https://denis-creative.com/wp-content/uploads/2017/07/sun.png" alt="Sun" class="sun-3 sun" data-stellar-ratio="2">
</div>
<footer>
  &copy; 2017
</footer>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
body {
  font-size: 1em;
  font-family: sans-serif;
}
div {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 600px;
  background-size: cover;
  z-index: 2;
  overflow: hidden;
}
.block-1 {
  background: url(https://denis-creative.com/wp-content/uploads/2017/07/1.jpg) 50% 50% no-repeat;
}
.block-3 {
  background: url(https://denis-creative.com/wp-content/uploads/2017/07/3.jpg) 50% 50% no-repeat;
}
.block-5 {
  background: url(https://denis-creative.com/wp-content/uploads/2017/07/5.jpg) 50% 50% no-repeat;
}
.block-text {
  padding: 60px 30px;
  height: auto;
  font-size: 1.6em;
  line-height: 1.4;
}
p {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
}
.sun {
  position: absolute;
  z-index: 1;
}
.sun-1 {
  right: 0;
  top: 20%;
}
.sun-2 {
  left: 0;
  top: 20%;
}
.sun-3 {
  left: 50%;
  margin-left: -200px;
  top: 20%;
}
footer {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

Подключаем необходимые библиотеки

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="libs/stellar/jquery.stellar.min.js"></script>
<script src="js/common.js"></script>

В файле js/common.js такое содержимое

$(function() {

  // Parallax background
  // http://markdalgleish.com/projects/stellar.js/docs/
  $.stellar({
    responsive: false,
    horizontalScrolling: false, // обязательно, чтобы не было горизонтального сдвига
  });

});

Рабочий пример:

See the Pen Parallax by Denis (@deniscreative) on CodePen.0

TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

Полезная инфа:

Оставить комментарий