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

How I built the animated reveal effect for the panels on the http://theexpedition.co homepage using native IX2 interactions.

Panel Reveal

Animated Scrolling Panel Reveal

A recreation of the WealthSimple Culture site following a request in the Facebook community. 

This is just first page, although the rest of the site follows a similar format. You'll notice some of the fonts and weights vary from the original. This is for educational purposes so people can understand how certain elements can be created. 

Original: 
https://www.wealthsimple.com/en-ca/culture/why/

You can check out the explainer video below for how some of the less common elements have been created. 

https://youtu.be/AB0sjVtkOp0

Wealthsimple

WealthSimple Culture Clone

A twist on a tradition slider, cloneable website with the use of Z-index and mouse over animations.

Zara

zara-collection

Viewport units in CSS are great, if you want to style an element to take up the full screen height – just set height: 100vh. Sadly, the 100vh unite breaks your design on mobile browsers that makes it nearly useless.

When in a mobile browser (Chrome + Safari) the address bar is visible, the bottom of the screen gets cut off since mobile browsers incorrectly set 100vh to be the height of the screen without the address bar showing.

A Better Solution: use height 100% instead of 100vh. In this sample project you will learn how to set this up! 

Discover full height websites built by the Webflow community

Discover full height websites built by the Webflow community