Please help! Trying to figure out how this double Parallax effect works

I am trying to recreate this Parallax effect as seen on http://www.librarybards.com/

I’m trying now all weekend to figure out how this works and how I can recreate this effect.

I hope someone is willing to help me.

Is there no one that can help me with this?

Perhaps if you were a bit more specific about the effect you’re trying to recreate, and where exactly your problem lies, people would feel more able to offer assistance.

Also people may be wary of minified URLs, they have no idea where it will take them.
There is no need to minify here, it’s not Twitter. :smiley:

Good point - I’ve edited it.

Sorry about the minified URL but the site is totally harmless, the last Forum I was on had a rule in place to minified urls.

What I’m trying to do is recreated the Header Parallax effect that got 2 fullscreen parallax’s with callout buttons before showing the main content. I am also trying to match the scroll speed. This one seems to use inline styles for the image tags and container, while inspecting I was not able to locate the Javascript that creates the effect.

There are plenty of scripts around that will do parallax scrolling as its not something you can do without JS.

You can fix an image in place easily enough but you need js to scroll it at the same time as you scroll the page.

Here’s the first script I found but there are plenty of others.

If you want to write one yourself then you would need to adjust the background-position of a background image so that it appears to move up at a slower rate than the page is scrolling.

1 Like

Thank you PaulOB the first script seems to work just fine for me!

It’s a pretty simple mix of js parallax and the css background-attachment:fixed rule.
Js parralax is very easy, while the css part can be quite a nightmare and will cause all kinds of trouble on mobile, or not even work.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.