I 'm fiddlin around with this Codepen I partially made ;)
This 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 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 ;)
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...
Here 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.
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
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.
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!
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
Hi guys!
I 'm fiddlin around with this Codepen I partially made ;)
This 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 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 ;)
Now it works.
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...
Can someone take a look at it?
Here 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.
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
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.
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!
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