Smoothing the parallax scrolling of a background image

jquery css html parallax

64,472

Solution 1

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

Solution 2

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.

Solution 3

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/

Solution 4

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.

Solution 5

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)';

View more solutions

64,472

Author by

Chuck Le Butt

Hello.

Updated on July 05, 2022

Comments

Chuck Le Butt almost 2 years
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?
Matt Coughlin about 11 years

In general, the jQuery animate() function 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.
Marc Uberstein about 11 years

Yes, and how would a parallax site run in IE6? Not very good I can imagine.
Matt Coughlin about 11 years

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.
Marc Uberstein about 11 years

Thanks for the info! And this won't be supported at all?
Chuck Le Butt about 11 years

@MarcUberstein Ha! I don't plan on supporting IE6 in this day and age anyway :)
Marc Uberstein about 11 years

@DjangoReinhardt Remember to add the script snook.ca/technical/jquery-bg/jquery.bgpos.js - see updated answer.
Rafael over 7 years

I am trying to use this on a class: document.getElementsByClassName("parallax").style.background‌Position = "0 -" + positionY + "px"; but it is not working. Any tip?
Shwetha over 7 years

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.backgr‌ound‌Position', if there's only one element having class 'parallax'
Rafael over 7 years

Ok. ShwethaU, Thanks.
Chuck Le Butt about 7 years

The difference is minor, but this is what I went for
Chuck Le Butt about 7 years

Not a bad look.
Chuck Le Butt about 7 years

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 about 7 years

Also, odd use of prefixes. Probably best to avoid using them these days, and relying on Autoprefixer instead.
Picard about 7 years

@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
Chuck Le Butt about 7 years

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 (stackoverflow.com/questions/21087518/…), which is probably why it's got so many quirks. Thanks for trying.
Chuck Le Butt about 7 years

Huh! I made my own fiddle and it works pretty nicely actually! jsfiddle.net/JohnnyWalkerDesign/ra90axjq