CODEWITHSUNDEEP
javascriptjquerybackground-imageparallax
Emphram Stavanger
Emphram Stavanger

Reputation: 4214

Parallax background performance and behavior

So far I've created a horizontally-scrolling site that has parallax effects on element background images (which are stretched to fit the size of the viewport). I've used the Stellar.js library to achieve the effect;

$.stellar({
    horizontalScrolling: true,
    verticalScrolling: false,
    horizontalOffset: $(window).width()
});

However, two problems I'm facing;

  1. The images tend to 'run out' before the the element has fully disappeared; showing the white background underneath. The severity of this effect depends on the size and shape of the viewport, so I'm guessing trying to figure out the math involved for image size, aspect ratio or the defined scroll ratios isn't worth it. Is there a way to make the scroll ratio "automatic" within Stellar, so that the background never 'runs out' (or is there an alternative parallax library that does that)?
  2. The performance of the effect is miserable regardless of browser and machine. Removing background-size: cover seems to improve things somewhat, but not "enough"; would using img elements improve the performance over background images? It's a huge change and a messy way of doing it, but it would be worth it if it fixes the laggy scrolling.

Thanks in advance!

Upvotes: 0

Views: 639

Answers (1)

Jessica Bobier
Jessica Bobier

Reputation: 43

As @Shivam suggested, use skrollr.js instead. I had this exact same problem. See: Parallax background image that fills container

Skrollr.js sets the beginning offset at 0 so you won't get that space below your image even with the background set as cover.

Here's the tutorial I followed to get this working on my site: http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/ . The only thing that's missing from the instructions are that in Step 1 you also need to include the imagesloaded.js file that comes with the example files. Hope that helps! I spent days trying to find the solution for this!

Upvotes: 1

Related Questions