Open Source CSS Headers and Footers (Free Code + Demos)

Create a parallax scrolling effect using CSS background-image position. This script works when the header image is positioned at the top of the page. A step by step guide at https://webmadewell.com/header-image-parallax-scrolling-effect-with-css By webmadewell.com

Featuring the most amazing things you can find on earth. Scroll may be a bit janky due to CSS Scroll Snap - not as smooth as I'd thought it'd be but still awesome. Images from pexels.com.

This pen shows how CSS pseudo-elements and transforms can be used to create a fixed, angled header with an image background.

A simple header for a software company searching people to work with.

Just a little front-end UI experiment. I needed a bit of color in my life! 🌈

High performance sticky header with shadow on scroll.

Sticky Headers be Sticky but shit, I made a menu too.

Evenly space links with CSS Grid. No margin or padding needed!

Expand/collapse footer with animations

Animated mobile footer menu to display 2-3 main actions a user can take on a mobile device. Shows up at 767px (for bootstrap users) Original image: https://500px.com/photo/142564117/nightfall-over-eidfjord-by-peter-lloyd

A simple example of using flexbox to create a sticky footer page layout.

Ken Burns Animated blog header background image, no javascript

Skewed divs and parallax effect created by fixed header. Simple layout and instructions for modification in the JS!

Photo by eflon, licensed under Creative Commons. Full explanation on my blog.

An idea for a project I am working on.

Explanation is at the top of CSS file. Just some typefaces, helper classes and few presets for easily testing headings typography.

Simple zoom effect using window scroll to adjust some CSS.

Some javascript magic to make this nifty little parallax hero.

Simple parallax hero header with flexbox

blur filter only supported in webkit

Fixed the header after scrolling and move the background until the end of the document. WATCH FULLSCREEN FOR BETTER EXPERIENCE Take a look at the photo on top during scrolling :)

Using element queries to power a layout with a cover image and a nav that sticks to the top of the page on scroll with the following query: @element 'html, body' and (min-scroll-y: 100vh) { header { position: fixed; top: 0; background: white; box-shadow: rgba(0,0,0,.05) ...

Read More

Really smooth on mobile / touch enabled devices.

I was inspired by the header on brainpickings.org. I like the way it uses the full size on page load and almost immediately after the user starts scrolling it shrinks down to a resonable size.

Rudimentary combination of jquery fixed header on scroll and nav active section class effect "Fixed Header On Scroll Effect" forked from sayed rafeeq's Pen FIXED HEADER - ON SCROLL EFFECT. "Scroll Active 2" forked from Xabi's Pen Scroll active 2. Forked from sayed rafeeq's Pen FIXED HE...

Read More

Setting classes on the header with javascript.

Fun example of a sticky header utilizing some CSS3 transitions!

Hidden nav that slides in from the top once the page is scrolled. Update: Added Active state to current navigation section. Changed each of the

wrappers to

and added a ".sections" wrapper.

Cool Navigation by Philippe Fercha

The header is not fixed with a solid background color and there is a fixed div at the top that is small. Then there is a div that is not fixed within the header with the title. Simply wanted to try and prototype the idea. Works in a decent hack-ish sort of way.

Creates a sticky hacky sticker header using CSS without creating a scroll event handler.

A pen that shows how to create a hero with a background video. A few things to note .... » I'm using jQuery to populate the content only to make the HTML look cleaner for reviewing the code. » I'm using CSS animation to fade in the entire body. » I'm using CSS transformations to scale ...

Read More

Shows full-screen video with effective, legible text overlay using mix-blend-mode, inspired by work at Everlane. Full explanatory article. Video by Maximilian Kempe, licensed under Creative Commons. Freeware Moderne Sans font by Marius Kempken.

Animation was customized used Adobe After Effects and rendered to be compatible across all browsers with .ogv and .webm files. Does not operate in mobile (intentionally). Bootstrap framework for HTML is used, no javascript needed. Click on 'Live View' under 'Change View' to see full header...

Read More

This is the 404 error page for a project I'm working on. I was working on figuring out how the responsive background video here.

I was playing around with website footers at work and wanted to get a little creative, I came across this pen (http://codepen.io/hudsonmarinho/pen/FHGeK) and decided to see if I could simplify/improve on it. Started as PureCSS but in order to make the height of the footer modify the margi...

Read More

Just a hover effect for the social media links in the footer of a page.

Just stumbled across this and loved the effect; the markup and styling were a bit much for my liking, so I found an easier way. main position: (not static) z-index: 1 margin-bottom: (footer height) footer position: fixed (and stick it to the bottom) height: (...)

A quick example of a fixed footer,

Pure CSS transitioned footer. Keeps away from content, shows itself when it needs to be seen.

Beautiful Aurora lights display for footer.

A responsive header featuring a New York backdrop optimized for mobile and larger screens.

Created this complex header using subgrid, a specification of CSS Grid Layout. It's not mobile friendly but to get a sense of the power of subgrid, try moving an element to a new place in the HTML (while retaining the same 3rd level of position in the hierarchy). The HTML can be optimized ...

Read More

This is a pretty simple effect to achieve for any header or content areas. This effect is particularly great for space-inspired content or perhaps networks/networking. This is a Codrops creation that I'm currently playing with. Pretty neat. Be sure to check out the original here

Based on dribbble shot by Ennio Dybeli - https://dribbble.com/shots/2427219-Header-Navigation-Day-053-dailyui Please note, that this demo is just an animation practice and it's probably useless in real world, because it's negatevily impacts usability.

This uses position: sticky so the header stays stuck to the top of the viewport.

A recreation & redevelop of the footer at Pavilion. I used some flex display trickery to stick it at the bottom and for the responsiveness. Overall, I love the colors, and the responsive logic is incredibly simple. Also, I'm in love with flex. I'll never go back to floats or tables aga...

Read More

Footer with contact section. responsive footer

It's a pure CSS website header utizilizing checkbox to generate an off canvas menu with two levels.

Just having a play around with making my first SVGs, and seeing how I can use them to make layouts a little bit more interesting. This pen's to play around with a wavy pink background section at the top of a page. I created the SVG in Figma, and optimised it with SVGOMG

Just a really simple header bar for this week's CodePen challenge.

Design from uidesigndaily.com

Beautiful Elegant Footer

Two solutions to the floating footer problem. Learn more: https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/

I'm a little late to the blob party, but I'm having fun Do not use this for real projects with this amount of blobs, use 24 of them or less 😛 _ Made using GistPad https://aka.ms/gistpad Pen available as a Gist: https://gist.github.com/oauo/ecdf56c499e809ad671c4d85d5c2b90a Open in GistP...

Read More