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

Я провел небольшое исследование и написал простой бит 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/

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

Есть ли способ сделать фона параллакса плавным?

источник

2013-04-03 Chuck Le Butt

Эй, проверить это сообщение в блоге о параллакса: http://www.html5rocks.com/en/tutorials/speed/parallax/ – skndstry

Добавить переходную свойство вашего CSS, поэтому он может быть ускорен GPU, как это:

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

источник

2014-06-04 14:12:58 mcmonkeys1

Это один –

Разница незначительна, но это то, что я пошел за –

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

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

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

источник

2013-04-03 13:55:07 CherryFlavourPez

Попробуйте изменить .css на номер .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

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

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

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

источник

2013-04-03 13:55:22

В общем случае функция [jQuery animate()] (http://api.jquery.com/animate/) не может использоваться в значении с несколькими частями, например 'background-position'. Отдельные стили «background-position-x» и «background-position-y» не были стандартизированы и не поддерживаются всеми браузерами. –

Да, и как сайт параллакса будет работать в IE6? Не очень хорошо, что я могу себе представить. –

'background-position-x' и' background-position-y' не поддерживаются последними версиями Firefox и Opera. Они были исключены из спецификации CSS3. Неясно, будут ли они в спецификации CSS4. Как написано в настоящее время, вышеуказанный код не работает ни в одном браузере. –

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

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

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

источник

2014-07-21 21:01:12 tuliomarchetto

Неплохой взгляд. –

Установите 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/

источник

2016-02-16 05:18:48 ShwethaU

Я пытаюсь использовать это в классе: document.getElementsByClassName ("parallax"). Style.backgroundPosition = "0 -" + positionY + "px"; Но это не работает. Любой отзыв? – Rafael

document.getElementsByClassName ("parallax") даст вам массив элементов dom. Вы не можете напрямую использовать свойство style для массива элементов. Поэтому попробуйте использовать 'document.getElementsByClassName ("parallax") [0] .style.background Position', если есть только один элемент с классом parallax – ShwethaU

Ok. ShwethaU, Спасибо. – Rafael

Чтобы сделать ее гладкой поместить изображение на отдельный DIV и переместить весь эль с помощью transform: 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), который вы используете d должны использовать что-то вроде:

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

или vanillaJS:

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

источник

2017-03-29 06:25:11 Picard

Я не думаю, что это сработает так же, как вы себе представляете. Попробуйте поместить его в скрипку (а не только преобразование, которое вы разместили), и я думаю, вы увидите, что это будет вести себя странно. –

Кроме того, нечетное использование префиксов. Вероятно, лучше не использовать их в наши дни и вместо этого использовать Autoprefixer. –

@Chuck Le Butt есть ссылка на скрипку в ответе :), и вы правы насчет префиксов - я просто быстро создал рабочий пример – Picard

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

ответ

Смежные вопросы