Q:

How does one move html elements with scroll? 

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. 

A:

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)

A:

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

