1. Dismiss Если это Ваш первый визит, ознакомьтесь с правилами форума: FAQ.
8

Статичный фон при скроллинге

Аватар пользователя mr.anderson на Mego-Forum.ru

Статичный фон при скроллинге страницы

Однажды была задача сделать статичный фон при скроллинге, как на Лендингах, решил это довольно просто обычными стилями:

Css:
 

.YoureClass{

  1. background: url(/Files/YoureImage.jpg) no-repeat center center fixed;
  2. -webkit-background-size: cover;
  3. -moz-background-size: cover;
  4. -o-background-size: cover;
  5. background-size: cover;
  6. 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;
        });
    };
})();

Тем самым выделяя классами нужные блоки получаем разную скорость скроллинга фона
Автор статьи: mr.anderson

Комментарии:

Комментарии отсутствуют

Добавьте Ваш комментарий

Ваше имя:
Сообщение
Успешно сохранено!
Закрыть окно
Загрузка Пожалуйста, подождите!
Тут будут отображаться Ваши сообщения
Закрыть окно
Введите Ваше сообщение:
Яндекс.Метрика