Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте.
Подключаем 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> © 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