Discover the best header-scroll websites created by professional designers. Get inspired and start planning your perfect header-scroll web design today!

I created this effect to help someone out on the Webflow Discord, and I thought I'd make it cloneable in case anyone else wants to use it! I also decided to spice it up a little with some lovely animations from Lottieflow :)

The basic effect is achieved just by setting the header as fixed at a lower z-index than the (relative positioned) content below.

Overlapped Header Effect

Designing for yourself it she toughest job for designer. Made to showcase my skills in web design and 3D. Working in webflow was easy peasy, mainly thanks to awesome tutorials. I used my own render for header video and an on scroll animation for json image sequence made with Lottie plugin. Hope you like it. Cheers!

Panweb

Wojtek Tymicki - Product Designer

The site that never ends. Just demonstrating a piece of custom code that enables continuous scroll forever by cloning the body. Why would you want that? Who knows, but here it is!

Please feel free to clone this cloning clone, but use with caution!

Forever scroll

Forever Scroll

Refresh your website header with one of our 3 free website headers Webflow cloneable template.

Clone it, copy it to your Webflow project, and that is all!

- - - - - - - - - -

Interested in this free Webflow Cloneable?

• Check out a live preview on: https://headers-cloneable-brixtemplates.webflow.io/

• Click 'Clone project' to get a clone on your Webflow account

• Get the cloneable Figma file to customize the styling and graphics: https://www.figma.com/community/file/1098309435482703339

- - - - - - - - - -

• BRIX Templates - Looking for more Webflow templates? Take a look at our collection of premium & free Webflow Templates on https://brixtemplates.com/

• BRIX Agency - Looking for a hand to design & develop an amazing Webflow website? Get in touch with our amazing team on https://brixagency.com/

35. Website Headers Webflow Cloneable Template - BRIX Templates

3 Website Headers Webflow Template | BRIX Templates

A little tweak with the interaction by moving the header 100vh up and down while scrolling over an element.

Fixed Position Tex Sections

fixed-position-tex-sections

I searched in the Webflow Showcase section and in the forums to only find that people used to have some problems with it. One demo I found was cool but wasn't working flawlessly (upon scrolling back up occasional flickering occurred). So I searched further and found a clean and easy solution from Chris Coyier from March 2020 and recreated his demo here in Webflow.

Footer Scroll Reveal 2020

This is a pricing comparison table and interactive header that I created for a client project but never ended up using. The background video can be swapped out, and the call-to-actions always stay visible while the user scrolls down to learn more about your products. 

All 4 breakpoints have been refined. 

Feel free to clone it and use it in one of your future projects.

Simple Pricing Table

Pricing Table with Interactive Header

Here's a recent website I built for a client. It turned out very nice with the scrolling interactions like shrinking header and horizontal sliding images. Let me know what you think!

Ad-A-Staff

Header component - Flowkit

header-component-flowkit-1

Header Footer Links

orca-header-footer-links

Legacy header footer

legacy-er22014050

This project was developed to launch Vanquished Media's new branding and suite of services. The parallax scrolling/clipping in the header is my favorite feature of this site.

Discover header scroll websites built by the Webflow community

Discover header scroll websites built by the Webflow community