Tutorial: Create a Simple Collapsing...

User 434929 Photo


Ambassador
938 posts

Tutorial: Create a Simple Collapsing Parallax Header Effect

http://www.youtube.com/watch?v=eeVuhlB9fP8
Edit on Oct. 7, 2019: The mentioned video is no longer available

The collapsing header effect is actually created with just a few simple lines of CSS. All it needs is a few position: fixed; declarations on your header and banner elements, then an adjustment of z-index values to allow the content to scroll over the top, giving the impression that the banner is collapsing as the user scrolls.
Guys at coffeecup are awesometacular.
User 2088758 Photo


Senior Advisor
3,086 posts

Very Cool Mansour! This has been added to the CC Youtube channel. Thanks for sharing.

https://www.youtube.com/watch?v=eeVuhlB … Djr-PlbgpT
Edit on Oct. 7, 2019: The mentioned video is no longer available

Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 434929 Photo


Ambassador
938 posts

Thank you Steve :)
Guys at coffeecup are awesometacular.
User 2210454 Photo


Registered User
231 posts

Nice one Mansour! I will have to implement this soon!!
:D:D
Simon,
“If what you’re doing is not your passion, you have nothing to lose.”
User 473158 Photo


Registered User
17 posts

Hi Mansour

I slightly modified your example in order to prevent the picture to move up on small screens by adding two more css-rules to the column containing it:

.subgrid > .row > [class*='coffee-span-'].subgrid-column-3 {
padding-right: 0;
padding-left: 0;
background-color: #fff;
top: 50px;
position: fixed;
}

Also, I gave the column that contains the main content a margin-top expressed as a percentage. This is to avoid the gap between the picture and the main content when seen on a small screen.

.subgrid > .row > [class*='coffee-span-'].subgrid-column-2 {
padding-right: 0;
padding-left: 0;
min-height: 950px;
background-color: #eded34;
position: relative;
margin-top: 45%;
}

Kind regards

Chris
User 434929 Photo


Ambassador
938 posts

great
Guys at coffeecup are awesometacular.
User 458539 Photo


Registered User
1,583 posts

Nice!!!

Will pull this one out soon

Byron
User 2924428 Photo


Registered User
1,718 posts

Mansour!! Great video man!!
I'm basing my next website off of this tutorial.. I have a question though, what size image will fit into this banner? Some of my images wont stretch far enough :(
User 434929 Photo


Ambassador
938 posts

Please read about Adding Background Images info which I put up on my own website here:

http://www.feizsite.com/CoffeeCup/bg/index.html
Edit on Oct. 7, 2019: The mentioned website is no longer available

in your css document try to play around with background-size
Such as:
background-size: auto;
background-size: cover;
background-size: contain;

The best value i use myself would be
background-size: cover;

and sometimes the background-size Scale to fit I use
background-size: 100%;

And play around with as well to get your desire background positioning
background-position: values ;

such as:
background-position: left top;

More info:
https://developer.mozilla.org/en-US/doc … und_images
Guys at coffeecup are awesometacular.
User 283347 Photo


Registered User
388 posts

Hello All...
Mansour...the parallax video is very helpful! Thanks!

I would like to apply the parallax effect to the "comet" layout in the template pack? What I have done so far was not change the layout at all, but add the parallax from the video to the very top. It works except when the pre-existing layout comes up it is below the banner image (not above)...as well...I have removed the element "main" that is done in the video...same result...whether its there or not=same thing. I have played around with css a bunch and have got so many variations to partially work but not all to work.

Any ideas? I have nothing to post as I did not save it. I messed around with "position relative" on just about the entire css and that yielded the closest...but no cigar. :) Speaking of that...is there a "blanket" command to apply a "position:relative" as opposed to doing each one separately?

I hope someone can follow what I'm trying to say. If not, no worries.

Thanks to all who are constantly helping others (like me) on this forum!!!:)

MJ

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.