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.

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

Thank you Steve

Nice one Mansour! I will have to implement this soon!!

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

great

Nice!!!

Will pull this one out soon

Byron

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

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

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