Самая простая и универсальная техника Parallax-background

4 Июля 2014

По сути, это модификация метода с сайта , который не устроил своей привязанностью к положению parallaxсекции на странице (этот способ корректно работает только при условии, что секция находится в начале документа. Если же применять его к секциям, расположенным ниже, будут наблюдаться лишние смещения фонового изображения) и использованием background-attachment: fixed, что делает этот метод несовместимым с CSS3 трансформациями. В моем же методе эти недочеты исправлены.

HTML

 

 

 


CSS
.parallax {
background-position: center;
background-repeat: repeat-y;
background-size: cover;
}

jQuery

$(function(){ // document ready function
var $window = $(window);
$('.parallax').each(function() { //выполняем скрипт отдельно для каждой секции
var $parallaxBlock = $(this);
var parallaxFunc = function() {
if ($window.width() >= 768) { //если ширина окна >= 768
var offset = $parallaxBlock.offset().top; //расстояние от начала документа до секции
var scrollTop = $window.scrollTop(); //прокрученное расстояние
var yPos = -(offset - scrollTop)/2; //считаем смещение
var coords = 'center '+ yPos + 'px';
$parallaxBlock.css('background-position', coords); //устанавливаем смещение
} else {
$parallaxBlock.css('background-position', 'center'); //отключаем параллакс на маленьких экранах
}
};
parallaxFunc(); //выполняем нашу функцию при загрузке страницы
$window.on('scroll', function() {
parallaxFunc(); //и при прокрутке
});
});
});

Как уже было замечено ранее функция выполняется только если ширина окна браузера больше 768. Это сделано для того, чтобы предотвратить некорректное отображение параллаксной секции на узких экранах, пропорции сторон которых очень часто обратны пропорциям фоновых изображений, что влечет за собой некорректное отображение фонового изображения и появлению видимых его повторений.

Понравилась статья? – Поделитесь ссылкой: