Grow your CSS skills. Land your dream job.

Awesome responsive parallax background

  • # March 18, 2013 at 4:26 pm

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

    # March 18, 2013 at 4:39 pm

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

    Now it works.

    # March 18, 2013 at 4:53 pm

    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…

    # March 20, 2013 at 6:27 pm

    Can someone take a look at it?

    # March 21, 2013 at 11:21 am

    [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.

    # March 21, 2013 at 6:35 pm

    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

    # March 22, 2013 at 11:07 am

    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.

    # March 22, 2013 at 1:34 pm

    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!

    # March 22, 2013 at 3:05 pm

    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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".