Сглаживание параллаксной прокрутки фонового изображения

Я провел небольшое исследование и написал простой бит jQuery, который прокручивает фон в несколько ином темпе на передний план, создавая эффект параллакса при прокрутке вниз веб-сайта.

к сожалению, это немного отрывистая.

вот базовая компоновка HMTL:

<body>
    <section>
        Site content goes here.
    </section>
</body>

вот CSS:

body {
    background-image: url('../images/bg.png');
    background-repeat: repeat-y;
    background-position: 50% 0;    
}

здесь JS:

$(window).scroll(function () {
    $("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
});

https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/

довольно просто, но моя проблема в том, что это немного отрывисто, когда вы прокручиваете, даже на мощном компьютере.

есть ли способ сделать фон анимации параллакса гладко?

9
css html html5 jquery parallax

6 ответов

добавьте свойство transition в свой CSS, чтобы он мог быть ускорен GPU следующим образом:

body {
    background-image: url('../images/bg.png');
    background-repeat: repeat-y;
    background-position: 50% 0;    
    transition: 0s linear;
    transition-property: background-position;
}
9

попробуйте анимировать свойство, которое может быть аппаратно ускорено в браузерах, поддерживающих его. Вместо того, чтобы изменить background-position свойство, используйте абсолютно расположенный img и затем изменить свою позицию с помощью CSS преобразований.

посмотри звездная.js. Этот плагин дает вам возможность анимации с помощью CSS-преобразований в способных браузерах (stellar.js позволит вам анимировать фоновые изображения с оговоркой, что он не будет работать так гладко на мобильных устройствах). Он также использует requestAnimationFrame, что означает меньше использования процессора, GPU и памяти.

Если вы считаете плагин перебор, вы можете по крайней мере проверить подход и адаптировать его к вашим потребностям.

6

иногда мы не можем использовать <img> элемент внутри div по некоторым причинам, таким как border-radius может перестать работать или width больше, чем родителей. Я столкнулся со всеми этими проблемами, и лучшим решением, которое я нашел, было использовать:

transition: 0.5s ease;
transform: translate3d(0, 0, 0);

Я получил очень хороший и плавный эффект параллакса с помощью GPU.

2

установите css тела, как показано ниже:

body {
  background-image: url(images/bg.jpg); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;
 }

затем, используя Javascript, просто получите pageYOffset при прокрутке страницы и установите его в фоновое положение фонового изображения тела, как показано ниже:

window.addEventListener('scroll', doParallax);
function doParallax(){
   var positionY = window.pageYOffset/2;
   document.body.style.backgroundPosition = "0 -" + positionY + "px";
}

просто проверьте мой пост здесь: http://learnjavascripteasily.blogspot.in/

2

чтобы сделать его гладким, поместите изображение на отдельный div и переместите весь элемент с помощью transform: translate - тогда вы получите действительно гладкие результаты.

вот небольшой пример, делающий что-то немного другое, но с помощью translate, чтобы дать вам идею:

HTML-код:

<div id="wrapper">
     <div id="content">Foreground content</div>
</div>

CSS:

@-webkit-keyframes MOVE-BG {
    0% {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
    50% { 
        transform: translate(-250px, 0%);
        -webkit-transform: translate(-250px, 0%);
    }
    100% {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
}

#wrapper {
    width: 300px;
    height: 368px;
    overflow: hidden;  
}
#content {
    width: 550px;
    height: 368px;
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    text-align: center;
    font-size: 26px;
    color: #000;

    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

и скрипка:http://jsfiddle.net/piotku/kbqsLjfL/

изнутри javascript (используя jQuery) вы бы должны использовать что-то вроде:

$(".element").css("transform", 'translateY(' + ($(this).scrollTop() / 2) + 'px)');

или в vanillaJS:

backgroundElement.style.transform = 'translateY(' + ($(this).scrollTop() / 2) + 'px)';
1

попробуйте изменить .css to .animate. поэтому вместо установки CSS на жесткие значения вы можете анимировать его.

$(window).scroll(function () {
    $("body").animate({"background-position":"50% " + ($(this).scrollTop() / 2) + "px"},{queue:false, duration:500});
});

NB: добавить скрипт http://snook.ca/technical/jquery-bg/jquery.bgpos.js

пожалуйста, имейте в виду, что я не тестировал его, дайте мне знать, если он работает.

анимировать фоновые изображения:http://snook.ca/archives/javascript/jquery-bg-image-animations

демо: http://snook.ca/technical/jquery-bg/

0