The Lodge is members-only web design and development videos and live help. Log In or Sign Up.
Here is the site:
How is this scroll effect accomplished? It’s not quite parallax, it just looks like a HUGE div scrolls up as the background image is fixed. However, I can’t seem to make it work.
Sorry for the confusion. When you click the link I provided, it redirects to the homepage. I didn’t realize that.
I’m not talking about the shuffle letters.
When you go to the link, manually click on the GREEN dot down below. That will take you to the page about the HTC project. Then, scroll down.
See how the background stays put and the other elements srcoll in front of it? How is that done?
Look into parallax scrolling.
there is a good tutorial [here](http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery) it would need some tinkering but should give you the gist.
I think this can be done in PURE css. It’s something akin to the background image being fixed and the other element scrolling over it.
I will tinker around with this tonight and post if I have a success.
In the meantime, does anyone else want to take a shot?
Check out [this plugin](http://ianlunn.co.uk/plugins/jquery-parallax/), or [these others](http://medleyweb.com/web-dev/15-useful-jquery-parallax-plugins-and-tutorials/).
> In the meantime, does anyone else want to take a shot?
@CrocoDillon YESSSSSSSS!!! WOW, that looks WAY easier than I thought. You are a ninja.
Please keep that CodePen up because that is MAD helpful.
Haha, glad I could help. Ofcourse I will keep that Pen up :)
Anyone know how all this might be contained in a wrapper? As soon as I throw a wrapper around this, it all breaks.
Please help! Thanks!
It’s kind of fragile I guess, put what you have in a Pen so we can see where it breaks.
You must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed