CODEWITHSUNDEEP
javascriptcssimagebackground
Logan
Logan

Reputation: 305

Multi-Background Images scrolling

I believe this effect can be created within the CSS, but I am not sure there might be some Javascript behind it. But basically I am trying to duplicate the background effect as seen on meandmyaaa.com. As you scroll down the white circles behind the main image seem to scroll at different rates, how can this be achieved?

Upvotes: 0

Views: 1305

Answers (1)

Matt Asbury
Matt Asbury

Reputation: 5662

There are actually 3 backgrounds:

  • .contentContainer holds the main background image and scrolls with the page as any background normally would
  • .bgCircle1 holds a background image of one set of circles
  • .bgCircle2 holds a background image of another set of circles

When you scroll the screen, .contentContainer scrolls normally whereas the scroll amount for .bgCircle1 and .bgCircle2 are calculated using this function which is bound to the scroll event of the window:

var offset = jQuery(window).scrollTop();
$('.bgCircle1').css({
  'backgroundPosition': 'center -' + (offset / px_scroll_amt) + 'px'
});
if (xhr_support) {
  $(".bgCircle2").css({
    'backgroundPosition': 'center -' + (offset / (px_scroll_amt / 3)) + 'px'
  });
}

It basically checks how far the window has scrolled and moves each of the backgrounds a different amounts. The background sizes are different heights to accommodate for this.

Upvotes: 1

Related Questions