Smoothing the parallax scrolling of a background image

Question

I've done a bit of research and written a simple bit of jQuery that scrolls the background at a slightly different pace to the foreground, creating a parallaxing effect as you scroll down a website.

Unfortunately it's a bit jerky.

Here's the basic layout of the HMTL:

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

Here's the CSS:

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

Here's the JS:

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

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

Pretty simple, but my problem is that it's a bit jerky when you scroll, even on a powerful computer.

Is there a way to make the background parallax animate smoothly?

Hey, check this blog post about parallax: http://www.html5rocks.com/en/tutorials/speed/parallax/ — skndstry, Apr 03 '13 at 13:56

score 16 · Accepted Answer · answered Jun 04 '14 at 14:12

16

Add transition property to your CSS so it can be accelerated by the GPU like this:

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

answered Jun 04 '14 at 14:12

rosmcmahon

443
6
7

The difference is minor, but this is what I went for – Chuck Le Butt Feb 06 '17 at 17:57
0s? Shouldn't be it something like 0.5s? – Robo Robok Sep 21 '22 at 10:10
i dont think so. wouldn't that delay the effect, and have the background you want unmoving, moving slightly on scroll? – rosmcmahon Nov 03 '22 at 08:21

CherryFlavourPez · Answer 2 · 2013-04-03T14:04:06.113

Try animating a property that can be hardware accelerated in browsers that support it. Rather than changing the background-position property, use an absolutely positioned img and then change its position using CSS transforms.

Take a look at stellar.js. That plugin gives you the option of animating using CSS transforms in capable browsers (stellar.js will let you animate background images, with the caveat that it won't work as smoothly on mobile devices). It also makes use of requestAnimationFrame, meaning less CPU, GPU, and memory usage.

If you deem a plugin overkill, you can at least check out the approach taken and adapt it to your needs.

score 5 · Answer 3 · answered Feb 16 '16 at 05:18

5

Set the css of the body as below:

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

Then using Javascript just get the pageYOffset on page scrolling, and set it to background position of the body background image as below:

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

Just checkout my post here: http://learnjavascripteasily.blogspot.in/

answered Feb 16 '16 at 05:18

Shwetha

903
8
15

I am trying to use this on a class: document.getElementsByClassName("parallax").style.backgroundPosition = "0 -" + positionY + "px"; but it is not working. Any tip? – Rafael Oct 12 '16 at 03:17
1

document.getElementsByClassName("parallax") will give you an array of dom elements. You cannot directly use 'style' property directly on array of elements. So try using 'document.getElementsByClassName("parallax")[0].style.background‌Position', if there's only one element having class 'parallax' – Shwetha Oct 17 '16 at 05:12
Ok. ShwethaU, Thanks. – Rafael Oct 20 '16 at 16:47

score 2 · Answer 4 · answered Jul 21 '14 at 21:01

2

Sometimes we can not use a <img> element inside a div for some reasons like a border-radius may stop working or a width bigger the than parent. I was facing all these issues and the best solution I found was to use:

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

I got really nice and smooth parallax effect using GPU.

answered Jul 21 '14 at 21:01

tuliomarchetto

549
1
5
14

Not a bad look. – Chuck Le Butt Feb 06 '17 at 18:01

score 1 · Answer 5 · answered Mar 29 '17 at 06:25

To make it smooth put the image on a separate div and move the whole element using transform: translate - then you will get really smooth results.

Here is a little example doing something a little bit different but using translate to give you the idea:

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;
}

and the fiddle: http://jsfiddle.net/piotku/kbqsLjfL/

from within javascript (using jQuery) you would have to use something like:

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

or in vanillaJS:

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

I don't think this will work as well as you imagine. Try putting it into a fiddle (not just the transform you've posted) and I think you'll see it will behave oddly. — Chuck Le Butt, Mar 29 '17 at 14:18
Also, odd use of prefixes. Probably best to avoid using them these days, and relying on Autoprefixer instead. — Chuck Le Butt, Mar 29 '17 at 14:19
@Chuck Le Butt there is a fiddle link in the answer :) and you're right about the prefixes - I was just quickly creating a working example — Picard, Mar 30 '17 at 06:23
Yes, as I said, your fiddle link doesn't really demonstrate the solution to the problem. It's just a basic transform, which I'm not sure will work in a parallax situation, but maybe you could demonstrate it in a fiddle. Also, I see you've adapted code from this question (http://stackoverflow.com/questions/21087518/animate-css-background-position-with-smooth-results-sub-pixel-animation), which is probably why it's got so many quirks. Thanks for trying. — Chuck Le Butt, Mar 30 '17 at 09:54
Huh! I made my own fiddle and it works pretty nicely actually! https://jsfiddle.net/JohnnyWalkerDesign/ra90axjq/ — Chuck Le Butt, Mar 30 '17 at 10:18

Marc Uberstein · Answer 6 · 2013-04-03T14:51:15.763

0

Try changing the .css to .animate. so instead of setting the CSS to hard values you can animate it.

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

NB: add script http://snook.ca/technical/jquery-bg/jquery.bgpos.js

Please keep in mind I haven't tested it, let me know if it works.

Animate Background images : http://snook.ca/archives/javascript/jquery-bg-image-animations

Demo: http://snook.ca/technical/jquery-bg/

edited Apr 03 '13 at 14:51

answered Apr 03 '13 at 13:55

Marc Uberstein

12,501
3
44
72

2

In general, the [jQuery animate() function](http://api.jquery.com/animate/) can't be used on a multi-part value like `background-position`. The individual `background-position-x` and `background-position-y` styles have not been standardized and don't appear to be supported by all browsers. – Matt Coughlin Apr 03 '13 at 14:25
Yes, and how would a parallax site run in IE6? Not very good I can imagine. – Marc Uberstein Apr 03 '13 at 14:30
1

`background-position-x` and `background-position-y` are not supported by the latest versions of Firefox and Opera. They were dropped from the CSS3 spec. It's uncertain whether they'll be in the CSS4 spec. As currently written, the above code doesn't work in any browser. – Matt Coughlin Apr 03 '13 at 14:41
Thanks for the info! And this won't be supported at all? – Marc Uberstein Apr 03 '13 at 14:44
2

@MarcUberstein Ha! I don't plan on supporting IE6 in this day and age anyway :) – Chuck Le Butt Apr 03 '13 at 14:45
@DjangoReinhardt Remember to add the script http://snook.ca/technical/jquery-bg/jquery.bgpos.js - see updated answer. – Marc Uberstein Apr 03 '13 at 14:51

Smoothing the parallax scrolling of a background image

6 Answers6