Статичный фон при скроллинге
Статичный фон при скроллинге страницы
Однажды была задача сделать статичный фон при скроллинге, как на Лендингах, решил это довольно просто обычными стилями:
Css:
.YoureClass{
- background: url(/Files/YoureImage.jpg) no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
- position: relative;
}
Но решил углубится и узнать как можно задать относительную скорость скроллинга backgound image когда скроллим страницу, что бы это щастье было управляемое и как то можно было его менять в зависимости от нашего контента, идеальный конечно вариант был создать класс в зависимости от которого бы устанавливалась скорость скролла.
Разная скорость скроллинга страницы
Для этого взял пример с страницы разработчика: http://callmenick.com/ post/ advanced-parallax-scrolling-effect добавив не много своего что бы получить разную скорость
Код JS:
(function(){
var Fixed = document.querySelectorAll(".Fixed1"), speed1 = 0.5;
var UnFixed = document.querySelectorAll(".UnFixed1"), speed1 = 0.8;
window.onscroll = function () {
[].slice.call(UnFixed).forEach(function (el, i) {
var windowYOffset = window.pageYOffset, elBackgrounPos = "0 " - (windowYOffset * speed) + "px";
el.style.backgroundPosition = elBackgrounPos;
});
[].slice.call(Fixed).forEach(function (el, i) {
var windowYOffset = window.pageYOffset, elBackgrounPos = "0 " + (windowYOffset * speed1) + "px";
el.style.backgroundPosition = elBackgrounPos;
});
};
})();
Тем самым выделяя классами нужные блоки получаем разную скорость скроллинга фона