Найпростіша та універсальна техніка Parallax-background

По суті, це модифікація методу з сайту , який не влаштував своєю прихильністю до положення 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. Це зроблено для того, щоб запобігти некоректному відображенню паралаксної секції на вузьких екранах, пропорції сторін яких дуже часто зворотні пропорціям фонових зображень, що тягне за собою некоректне відображення фонового зображення. видимих ​​його повторень.