Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ananda Johnson
Ananda Johnson
5,771 Points

How to create a specific effect with a div?

Anyone know how I would recreate the effect in the top div where the text starts to fade before disappearing and the image in the div goes down as you scroll down the page?http://ambercreative.co/experiments/apple-store/#0

Thanks for any ideas and help!

3 Answers

David Bath
David Bath
25,940 Points

The top div (the header) has a fixed position so that it stays at the top of the page. It also has a white background with a slight transparency (.95 opacity), so as the page gets scrolled text and images pass behind the div and you still see a little bit of it as it scrolls behind the header. Is that what you're asking about, or something else?

Ananda Johnson
Ananda Johnson
5,771 Points
Ananda Johnson
Ananda Johnson
5,771 Points

Actually I'm referring to that image in the jumbotron behind the header at the top, see how the image scrolls down almost like it's not part of the div? But thanks for the help, I think it's something tricky, maybe JQuery plugin.

David Bath
David Bath
25,940 Points

I see. I didn't see that effect viewing the page with Safari, but I switched to Chrome and I see what you mean. I believe you're referring to the parallax scrolling. You can find many more examples of it if you search for that term. Here is one JS library that will help you: http://pixelcog.github.io/parallax.js/ and some jQuery plugins: https://plugins.jquery.com/tag/parallax/ One of them may also do the fade effect on the container's text.

Ananda Johnson
Ananda Johnson
5,771 Points
Ananda Johnson
Ananda Johnson
5,771 Points

Thanks! That's exactly what I'm looking for.