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

1
2
3
Html
Css/SCSS
Javascript

Author

1
Alain

Demo


2.SLANTED HERO

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Joshua Ward

Demo


3.KALLI HERO

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Mariusz Dabrowski

Demo


4.Responsive sticky header navigation

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
MarcLibunao

Demo


5.UNUSED HERO

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
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

1
2
3
Html
Css/SCSS
Javascript

Author

1
Nico van Zyl

Demo


7.HERO ANIMATION

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Nichola

Demo


8.PROPER HERO

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Reech Studio

Demo