I want to create scroll behavior like what can be found here. If you scroll down the page you will notice the crabs, sharks, waves etc are animated whenever the page moves. How can this be achieved? Is this a script or CSS animation?

Edit: text bubbles also appear and disappear at different scroll points.

I want to create scroll behavior like what can be found here. If you scroll down the page you will notice the crabs, sharks, waves etc are animated whenever the page moves. How can this be achieved? Is this a script or CSS animation?

Edit: text bubbles also appear and disappear at different scroll points.

• javascript
• css

Share Improve this question Follow asked Sep 2, 2011 at 17:50 providenceprovidence 29.5k1313 gold badges4848 silver badges6363 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

If you would like a more robust jQuery script to help you out: Per the answer at Loading a long page with multiple backgrounds based on vertical scroll value in jQuery?:

A slightly more full fat solution to the already great one suggested by Justin is to use jQuery Waypoints to manage the in viewport events.

...

(the answer by Nicholas Evens)

It is a script, just bind a function to the window 'scroll' event with a callback function to do whatever you want. You can tell how far you've scrolled with window.scrollY.

$(window).bind('scroll', function () {
    console.log(window.scrollY);
});

You need to subscribe scroll event using jQuery and move your element basing on the scrolling offset whitch can be reached using .scrollTop() property

$(window).scroll(function () { 
    var scrollOffset = $(this).scrollTop();
    // move element to the offcet
});

I didn't look at the site's source code, but I believe it depends on JS. Javascript is necessary to listen to the scroll event of the page, and act according to the current value of document.scrollTop. Then the elements can be positioned with JS, and images can be switched either directly in JS, or by using CSS to change some element's CSS class.

That is definitly a script, you can attach an onscroll event and get the percentage of the current scroll and just position your "crabs" depending on that.

There was already a lot of scripts of how to get the percentage here