Search code examples
jqueryanimationbackgroundparallax

Move background-image position along a path when scrolling

This is my first post to I apoligise if its not perfectly put.

Essentially I am trying to achieve the same or similar effect as has been brilliantly utilised on the Red Bull Art of Flight movie website:

http://artofflightmovie.com/

i.e the background-image moving along a path of co-ordinates as the user scrolls down the page. I'm not to worried about the content animations at the moment just the background animation.

I am able to do the basic, move the background from a to b animation but am stauck on what to do when i want to go from b to c, c to d etc etc.

I have tried using the openly available:

$('.bg').scroll(function(){
   var x = $(this).scrollTop();
   $(this).css('background-position','0% '+parseInt(-x/10)+'px');
});

This allows me to set the background position change when the user scrolls but I am not sure how I would then set the next animation. My initial thought was to use an else if but this was not successful.

The artofflightmovie.com example sets an array of background-position px measurements which are then read like a timeline.

I'm ok with what I want the CSS to be however my knowledge of jQuery is not up to a level that I can overcome the issues i'm having.

I have also taken the source of the Art Of Flight page and attempted to created a simplified version to build on but again to no great avail.

Any help, would be appreciated

Solution

  • Thanks for the input guys.

    I actually found the sort of thing I was after here: http://joelb.me/scrollpath/

    Great jQuery plugin that uses the canvas element to render a path and jQuery control the scroll along it. Events/functions can also be triggered at every way point.