Parallax background doesn't work (Only one image)

Question

So I saw a nice background on http://terraria.org/about and thought by myself I want to that too since I run a Terraria Server.

So I have searched around the net for a function that could make this possible. I have tried various things but this is the code I used:

link:
http://codepen.io/anon/pen/DCGuz

As you can see only the first image (which is on the top layer) moves, I was wondering how I could make all the images move as shown on http://terraria.org/about . Also the background DOESN'T MOVE when I mouse over the logo or webpage itself while it SHOULD move when I move my mouse over the website, it's not supposed to be a mouse-over image.

PS: When I try the moving background on my website (full screen) in my browser it's rather slow and doesn't move smooth, but it does move quick and smooth on terraria.org/about. Is there a way to fix this issue?

Thanks in advance!

EDIT: As you can see on my website http://teeria.net/ only the first image moves, and it's not smooth.

Answer 1

t.niese already said it: You create all these mouse-event handlers but only the topmost one gets called.

Instead, use $(window).mousemove() once and do all your stuff there. Also you repeatedly lookup the moving div with jQuery (every time the mouse moves) which might slow the animation down a bit.

You can save yourself quite a lot of typing/copying by using javascript closures: How do JavaScript closures work?

Here's how it looks with the suggested changes: http://codepen.io/anon/pen/KgFhI

Edit : Make sure you are not violating any copyrights when using the image on your own website!

Bonus-edit : window.requestAnimationFrame is neat: http://codepen.io/anon/pen/yEbnd

Answer 2

The easiest way would be to use CSS3. Basically you will need layers on top of layers.
Check out
Here--> https://github.com/abaddonGIT/paralax (translate to english)
demo--> http://angular.demosite.pro/paralax/
found here--> http://jqueryplugin.net/woolparalax-jquery-plugin-parallax-effect-css3/#sthash.XWD5Fr6P.uxfs

very simple
so it would be like

    window.onload = function () {
    $ ('# Wool-paralax). WoolParalax ();
    }
    <Div id = "wool-paralax">
    <div class="wool-layer" data-shift="0.02">
    <Img src = "img / 1.png" alt = "" />
    </div>
    <div class="wool-layer" data-shift="0.03">
    <Img src = "img / 2.png" alt = "" />
    </div>
    <div class="wool-layer" data-shift="0.04">
    <Img src = "img / 3.png" alt = "" />
    </div>