Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Awesome responsive parallax background

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #43479
    joepk
    Participant

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

    #128674
    Merri
    Participant

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

    Now it works.

    #128678
    joepk
    Participant

    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…

    #129066
    joepk
    Participant

    Can someone take a look at it?

    #129173
    gogglepudding
    Participant

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

    #128877
    joepk
    Participant

    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

    #129354
    gogglepudding
    Participant

    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.

    #129361
    joepk
    Participant

    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!

    #129371
    gogglepudding
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.