Awesome responsive parallax background

[joepk]

Hi guys!

I ‘m fiddlin around with this Codepen I partially made ;)

[This](http://www.jquery4u.com/animation/jquery-parallax-tutorial/ “Parallax background!”) tutorial covers the basics I need to achieve my result. So I ripped some code and tried putting my stuff together. The sad thing is, that it doesn’t work anymore in Codepen. Obviously I’m doing something wrong, copied and pasted to easily I guess…

What I first would like to see is that the Codepen that I made which you can view [here](http://codepen.io/anon/pen/xoeKJ “Codepen”) works again. The orbs wont move! The second thing is that the orbs are aligned in perspective (had no idea how to put that in the right words :p) . I want to create that dimensional feeling. As if the orbs are in a real space, the one more distant than the other.

If you guys can help me out with these 2 small things we’ll have a awesome piece of code to be shared. Endless possibilities ;)

[Merri]

– Go to right top corner where it says Ctrl 3, click the icon.
– Remove jQuery.
– Remove external script.

Now it works.

[joepk]

Ah I see! It sort of works again… But the orbs only move horizontally :s and then there is a issue with the position: relative on the parallax div which I disabled. When it’s active it fixes the overflow but then the orbs disapear damnit…

[joepk]

Can someone take a look at it?

[gogglepudding]

[Here](http://cdpn.io/lwuDd “Fixed pen”) is what I’ve done to fix the first issue. All I did was uncomment the position:relative and gave #parallax a fixed width and height.

As for the second issue. Elements you want perceived as far away shouldn’t move as much as elements you want perceived as close. I don’t know how to alter that with this particular parallax javascript; I’ve personally only used plax.js.

[joepk]

Oké but my intention was to keep it working within the entire screen area ;) Sort of a nice background effect. The plax.js version didn’t work so smooth as this one though. Still need some more help on this guys :o

[gogglepudding]

Updated the pen I posted yesterday. This has been quite a learning experience :). I troubleshooted and found that the height of 100% was what was breaking everything. Google led me to this bit of knowledge:
“An element with position:relative on the whole behaves in the same way a normal position:static element does. Therefore setting height:100% will have no effect unless the parent element has a defined height. In contrast absolute positioned elements are removed from the document flow so are free to adjust to whatever height their containing element currently has.”

So, #parallax is now absolutely positioned and everything should behave the way you intended.

[joepk]

Looks better! Though the scrollbars are the last things we need to get rid of! But I’m glad to hear you got some expierence out of it ;) Tomorrow I’ll digg into it again. See what I can make of it. The gradients are terrible but I will replace them with nice smooth png gradients… Keep an eye on the pen!

[gogglepudding]

Ah I didn’t even notice that. Well the quickest fix I came up with is changing the width and height to ~98%. But part of me thinks it *could* be CodePen. Might be worth trying it out locally

[Author]

Posts