Table of Contents

NON RECTANGULAR HEADERS

Non-Rectangular header with inline SVG.

See the Pen Non Rectangular Headers with inline SVG by Paolo Duzioni (@Paolo-Duzioni) on CodePen.

Author

  • Paolo Duzioni

Made with

  • HTML (Pug) / CSS (SCSS)

CURVE HEADER

Pure CSS curve header.

See the Pen curve header by Omar Dsooky (@linux) on CodePen.

Author

  • Omar Dsoky

Made with

  • HTML
  • CSS

HEADER IMAGE PARALLAX SCROLLING EFFECT WITH CSS

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.

See the Pen Header Image Parallax Scrolling Effect with CSS by WebMadeWell (@webmadewell) on CodePen.

Author

  • Web Made Well

Made with

  • HTML
  • CSS
  • JavaScript (jQuery.js)

FIXED ANGLED HEADER

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

See the Pen Fixed Angled Header using a CSS Pseudo-Element by George W. Park (@GeorgePark) on CodePen.

Author

  • George W. Park

Made with

  • HTML
  • CSS

SKEWED HEADER

Skewed header with HTML and CSS.

See the Pen Skewed header by Arthur Camara (@arthurcamara1) on CodePen.

Author

  • Arthur Camara

Made with

  • HTML/Pug
  • CSS/Stylus

CURVE SVG BACKGROUND ANIMATION

Curve SVG background animation for header.

See the Pen Curve SVG Background Animation by Arman (@armantaherian) on CodePen.

Author

  • Arman

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

CSS Animated Header

Animated blog header background image, no JavaScript.

See the Pen CSS Animated Header by Nodws (@nodws) on CodePen.

Author

  • Nodws

Made with

  • Html / CSS
Demo and Download Demo and Download

Slanted Div, Fixed Header

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

See the Pen Slanted Div, Fixed Header by Andrew Bales (@agbales) on CodePen.

Author

  • Andrew Bales

Made with

  • Html / CSS / JS
Demo and Download Demo and Download

CSS Header

HTML and CSS fixed disappearing scrolling header.

See the Pen Fixed Disappearing Scrolling Header by Dudley Storey (@dudleystorey) on CodePen.

Author

  • Dudley Storey

Made with

  • Html / CSS
Demo and Download Demo and Download

Multi-Layered Parallax Illustration

HTML, CSS and JavaScript multi-layered parallax illustration.

See the Pen Multi-layered Parallax Illustration by Patryk Zabielski (@zabielski) on CodePen.

Author

  • Patryk Zabielski

Made with

  • Html / CSS / Javascript
Demo and Download Demo and Download

Hero Idea

Hero idea in HTML, CSS and JavaScript.

See the Pen Hero idea by iamtheWraith (@iamtheWraith) on CodePen.

Author

  • Jake Lundberg

Made with

  • Html / CSS /Javascript
Demo and Download Demo and Download

Headings/Hero Image Typography Playground

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

See the Pen Headings/Hero image typography playground by Mirko Zorić (@fluxus) on CodePen.

Author

  • Mirko Zorić

Made with

  • Html / CSS
Demo and Download Demo and Download

Hero Zoom On Scroll

Simple zoom effect using window scroll to adjust some CSS.

See the Pen Hero Zoom on Scroll by Derek Palladino (@derekjp) on CodePen.

Author

  • Derek Palladino

Made with

  • Html / CSS
Demo and Download Demo and Download

Neat Parallax Hero Effect

Some JavaScript magic to make this nifty little parallax hero.

See the Pen Neat Parallax Hero Effect by magnificode (@magnificode) on CodePen.

Author

  • Dominic Magnifico

Made with

  • Html / CSS / JS
Demo and Download Demo and Download

CSS Parallax Header Image

HTML and CSS parallax header image.

Demo Image: CSS Parallax Header Image

Author

  • Bennett Feely

Made with

  • Html / CSS
Demo and Download Demo and Download

HOVER EFFECT FOR HEADERS

8 hover effects for header in HTML and CSS.

See the Pen Hover Effect for Headers by Olivia Ng (@oliviale) on CodePen.

Author

  • Olivia Ng

Made with

  • HTML (Pug) / CSS (SCSS)

HEADER / ABOUT PAGE

A simple header.

See the Pen Software Company Header/About by Jorge Reyes (@imreyesjorge) on CodePen.

Author

  • Jorge Reyes

Made with

  • HTML / CSS (SCSS)

HEADER FOR LANDING PAGE

Header for landing page using clip-path.

See the Pen Header for landing page using clip path. by Gerardo Valencia (@grardovr) on CodePen.

Author

  • Gerardo Valencia

Made with

  • HTML / CSS

SEXY ANIMATED RAINBOW WAVES HEADER

Just a little front-end UI experiment.

See the Pen 🌈 Sexy Animated Rainbow Waves Header by Jeffrey Bennett 😃 (@PickJBennett) on CodePen.

Author

  • Jeffrey Bennett

Made with

  • HTML
  • CSS

Hero Image Showcase

Hero image showcase with HTML, CSS and JS.

Demo Image: Hero Image Showcase

Author

  • Art

Made with

  • Html / CSS / JS
Demo and Download Demo and Download

FULLSCREEN HERO

CSS flexbox full hero with button.

See the Pen Flexbox Full Hero With Button by Alan Tucker (@alantucker) on CodePen.

Author

  • Alan Tucker

Made with

  • HTML
  • CSS/SCSS

Hero Effect–Magazine

A hero image that uses height: 100vh to cover the entire screen for a magazine cover effect. When scrolled, it has a subtle animation similar to opening a magazine.

Demo Image: Hero Effect–Magazine

Author

  • Cameron Campbell

Made with

  • Html / CSS
Demo and Download Demo and Download

Flexbox Hero Header

Simple parallax hero header with flexbox.

Demo Image: Flexbox Hero Header

Author

  • Ana Vicente

Made with

  • Html / CSS
Demo and Download Demo and Download

Simple Parallax Header

HTML, CSS and JS simple parallax header with blur.

Demo Image: Simple Parallax Header

Author

  • tsimenis

Made with

  • Html / CSS / JS
Demo and Download Demo and Download

Hero OnScroll

HTML, CSS and JS hero on scroll.

Demo Image: Hero OnScroll

Author

  • verdzik

Made with

  • Html / CSS / JS
Demo and Download Demo and Download

Fullscreen Header With Background Color Cycle

Fullscreen header with background color cycle in pure CSS.

Demo Image: Fullscreen Header With Background Color Cycle

Author

  • Kenny Sing

Made with

  • CSS
Demo and Download Demo and Download

Continuous Scrolling Background Of Sticky Header

Continuous scrolling background of sticky header in HTML, CSS and JavaScript.

Demo Image: Continuous Scrolling Background Of Sticky Header

Author

  • Robert Borghesi

Made with

  • Html / CSS / Javascript
Demo and Download Demo and Download

STICKY HEADERS

See the Pen Sticky Headers be Sticky by Joshua Ward (@joshuaward) on CodePen.

Author

  • Joshua Ward

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript

STICKY HEADER ON SCROLL

High performance sticky header with shadow on scroll.

See the Pen Sticky Header on Scroll by Marco Biedermann (@marcobiedermann) on CodePen.

Author

  • Marco Biedermann

Made with

  • HTML
  • CSS/PostCSS
  • JavaScript/Babel

Responsive Scrolling Sticky Header

Using element queries to power a layout with a cover image and a nav that sticks to the top of the page on scroll.

Demo Image: Responsive Scrolling Sticky Header

Author

  • Tommy Hodgins

Made with

  • Html / CSS
Demo and Download Demo and Download

Scroll Header

Really smooth on mobile/touch enabled devices.

Demo Image: Scroll Header

Author

  • Blake Bowen

Made with

  • Html / CSS
Demo and Download Demo and Download

Responsive Scroll Header

Responsive scroll header in HTML, CSS and JavaScript.

Demo Image: Responsive Scroll Header

Author

  • Macnab

Made with

  • Html / CSS / Javascript
Demo and Download Demo and Download

Header Fade

HTML, CSS and JavaScript header fade.

Demo Image: Header Fade

Author

  • Emmanuel Pilande

Made with

  • Html / CSS / JavaScript
Demo and Download Demo and Download

Fixed Header Scroll Effect And Smart Nav For One-Page Sites

Rudimentary combination of jQuery fixed header on scroll and nav active section class effect.

Demo Image: Fixed Header Scroll Effect And Smart Nav For One-Page Sites

Author

  • Summer

Made with

  • Html / CSS
Demo and Download Demo and Download

Auto Hide Sticky Header

Setting classes on the header with JavaScript.

Demo Image: Auto Hide Sticky Header

Author

  • jasper

Made with

  • Html / CSS / JS
Demo and Download Demo and Download

Sticky Header CSS Transition

Fun example of a sticky header utilizing some CSS3 transitions!

Demo Image: Sticky Header CSS Transition

Author

  • Sammons

Made with

  • Html / CSS
Demo and Download Demo and Download

Top Sliding Nav

Hidden nav that slides in from the top once the page is scrolled.

Demo Image: Top Sliding Nav

Author

  • Chris Gruber

Made with

  • Html / CSS
Demo and Download Demo and Download

Responsive Sticky Header Navigation

Cool navigation with HTML, CSS and JS.

Demo Image: Responsive Sticky Header Navigation

Author

  • MarcLibunao

Made with

  • Html / CSS / Javascript
Demo and Download Demo and Download

Fixed Header (Quick Hack)

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.

Demo Image: Fixed Header (Quick Hack)

Author

  • Darcy Voutt

Made with

  • Html / CSS
Demo and Download Demo and Download

Sticky Header Visual Trick

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

Demo Image: Sticky Header Visual Trick

Author

  • Michael

Made with

  • Html / CSS
Demo and Download Demo and Download

React Video Header

Simple React.js video header.

Demo Image: React Video Header

Author

  • Mark Sarpong

Made with

  • CSS / JS
Demo and Download Demo and Download

Video Header

Video header with HTML, CSS and JavaScript.

Demo Image: Video Header

Author

  • Alex

Made with

  • Html / CSS / Javascript
Demo and Download Demo and Download

Hero Video

A pen that shows how to create a hero with a background video.

Demo Image: Hero Video

Author

  • Chris Simeone

Made with

  • Html / CSS
Demo and Download Demo and Download

Fullscreen Background Video With Mix-Blend-Mode Overlay Text

Shows full-screen video with effective, legible text overlay using mix-blend-mode.

Demo Image: Fullscreen Background Video With Mix-Blend-Mode Overlay Text

Author

  • Dudley Storey

Made with

  • Html / CSS
Demo and Download Demo and Download

Video Header Animation

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.

Demo Image: Video Header Animation

Author

  • Sylvia Maguia

Made with

  • Html / CSS
Demo and Download Demo and Download

Responsive Video Header

Responsive video header with gradient in HTML and CSS.

Demo Image: Responsive Video Header

Author

  • Jacob Davidson

Made with

  • Html / CSS
Demo and Download Demo and Download

ANIMATED FOOTER TOGGLE

Expand/collapse footer with animations.

See the Pen Animated footer toggle by Sheelah Brennan (@sheelah) on CodePen.

Author

  • Sheelah Brennan

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript (Babel)

FOOTER WITH CSS GRID

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

See the Pen Footer with CSS Grid by Jules Forrest (@julesforrest) on CodePen.

Author

  • Jules Forrest

Made with

  • HTML / CSS

FLEXBOX STICKY FOOTER

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

See the Pen Flexbox Sticky Footer Example by Ryan Mulligan (@hexagoncircle) on CodePen.

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS)

Parallax Footer

Website fixed footer with HTML, CSS and JavaScript.

Demo Image: Parallax Footer

Author

  • Austin Paquette

Made with

  • Html / CSS / Javascript
Demo and Download Demo and Download

Footer With Content Scale

HTML, CSS and JavaScript footer with content scale.

Demo Image: Footer With Content Scale

Author

  • Mātthīas

Made with

  • Html / CSS / Javascript
Demo and Download Demo and Download

Social Media Footer

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

Demo Image: Social Media Footer

Author

  • Andrew Canham

Made with

  • Html / CSS
Demo and Download Demo and Download

ANIMATED MOBILE FOOTER MENU

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).

See the Pen Animated Mobile Footer Menu by Pete Lloyd (@plloyd11) on CodePen.

Author

  • Pete Lloyd

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jQuery.js)

Simple Fixed Footer

HTML and CSS simple fixed footer.

Demo Image: Simple Fixed Footer

Author

  • Mātthīas

Made with

  • Html / CSS
Demo and Download Demo and Download

Simple Slide-Out Footer

HTML and CSS simple slide-out footer.

Demo Image: Simple Slide-Out Footer

Author

  • Riley Shaw

Made with

  • Html / CSS
Demo and Download Demo and Download

HTML And CSS Fixed Footer

A quick example of a fixed footer.

Demo Image: HTML And CSS Fixed Footer

Author

  • Mads Håkansson

Made with

  • Html / CSS
Demo and Download Demo and Download

Pure CSS Classy Footer

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

Demo Image: Pure CSS Classy Footer

Author

  • Nick Braver

Made with

  • Html / CSS
Demo and Download Demo and Download

Beautiful Aurora Footer Lights

Beautiful Aurora lights display for footer.

Demo Image: Beautiful Aurora Footer Lights

Author

  • Amit Ashok Kamble

Made with

  • Html / CSS
Demo and Download Demo and Download