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