Header

A container element for navigation and other content at the top of the screen with (optional) visual effects based on scroll position.

• Basic header demo #1 - Scrolls with the page
• Basic header blend demo #2 - Scrolls with the page and changes the header background color when scrolling
• Basic parallax header demo #3 - Scrolls with the page and moves the header background image at a different rate than the foreground when scrolling
• Condenses header demo - Shrinks when scrolling down
• Reveals header demo - Slides back the header when scrolling up
• Fixed header demo - Stays at the top of the visible viewport when scrolling
• Blend background color header demo - Changes the header background color when scrolling
• Blend background image header demo - Changes the header background image when scrolling
• Parallax and fade background header demo - Moves the header background image at a different rate than the foreground when scrolling and fades the background image into a background color after the header condenses
• Parallax and blend background header demo