A Collection of hand-picked 8 Hero Effect in CSS and JavaScript code examples.Show how to create a section that reveals its content when the previous element scrolls away.

1.Lime Hero

Made with

Html
Css/SCSS
Javascript

Author

Alain

Demo

2.SLANTED HERO

Made with

Html
Css/SCSS
Javascript

Author

Joshua Ward

Demo

3.KALLI HERO

Made with

Html
Css/SCSS
Javascript

Author

Mariusz Dabrowski

Demo

4.Responsive sticky header navigation

Made with

Html
Css/SCSS
Javascript

Author

MarcLibunao

Demo

5.UNUSED HERO

Made with

Html
Css/SCSS
Javascript

Author

Laurence Archer

Demo

6.SKEW ANIMATION HERO

Add a bit of animation to SVG polygon/diagonal lines when scrolling with a few lines of JavaScript.

Made with

Html
Css/SCSS
Javascript

Author

Nico van Zyl

Demo

7.HERO ANIMATION

Made with

Html
Css/SCSS
Javascript

Author

Nichola

Demo

8.PROPER HERO

Made with

Html
Css/SCSS
Javascript

Author

Reech Studio

Demo