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