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.

Only the top most layer will receive mouse events. So you would need do all movement in the event listener of this layer. — t.niese, Sep 15 '14 at 19:13

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

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

edited May 23 '17 at 12:31

Community

1
1

answered Sep 15 '14 at 19:29

svckr

791
6
11

Ah yes I see it now, there is only one issue and that's the slowness of the movement and it's not smooth. I have also been trying another scripts but those only move sideways like I have tried this: http://codepen.io/stefanjudis/pen/nrzHI – user2150482 Sep 15 '14 at 19:38
But I couldn't really figure out how to make it work exactly like the background is now.. – user2150482 Sep 15 '14 at 19:39
And yes, I will make sure I am not violating any copyrights :) but erh could you take a look at the script I send? – user2150482 Sep 15 '14 at 19:47
I did. [codepen.io/stefanjudis/pen/nrzHI]? There is no JS? – svckr Sep 15 '14 at 20:03
I have tried the code above which is: http://codepen.io/anon/pen/jBIar but there is one issue, it doesn't show as a background and is on http://teeria.net/ if you scroll all down, set as an image. – user2150482 Sep 15 '14 at 20:16
Yeah, but that's what user2202257 posted… I'm confused. – svckr Sep 15 '14 at 20:22
Yeah I am sorry I was trying to refer to what he posted, I am using his code now but now the issue I am having is that whenever I set the setting to 1920px 1080px, the images will become out of bounce as you can see on http://teeria.net/ and it's set as an image and not a background, is there a way to fix this? – user2150482 Sep 15 '14 at 20:32

score 0 · Answer 2 · edited May 10 '16 at 18:23

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>

Okay I have got this working but there is only one issue as you can see on my website http://teeria.net/ the static background is shown and once you scroll down you will see the parallax effect (it's set as an image and not background?) and it's too small. — user2150482, Sep 15 '14 at 20:15

Parallax background doesn't work (Only one image)

2 Answers2