The most simple and versatile technique Parallax-background

4 July 2014

In fact, this modification of the site, which did not suit his attachment to the position parallaxsektsii page (this method works correctly only if that section is at the beginning of the document. If you apply it to the section located below, will be observed the extra displacement background images) and using background-attachment: fixed, which makes this method incompatible with CSS3 transformations. In my method, as these defects are corrected.

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(); //и при прокрутке
});
});
});

As mentioned previously a function carried out only if the width of the browser window over 768. This is done in order to prevent incorrect display of parallax section on narrow screens aspect ratio which is often inverse proportion backgrounds, which entails the incorrect display of the background image and the appearance its apparent repetition.

Did you like the article? - Share the link: