Collection of hand-picked free vanilla JavaScript hero effect code examples. Update of January 2020 collection.

Related Articles

  1. CSS Hero Effects

Author

  • Pete Barr

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Disney+ 3D Hero GSAP Animation

Disney hero of heros.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Paulina Hetman

Links

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

When You Can't Decide...

An idea of the hero image when a comparison between two states makes sense (before/after, winter/summer).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Hugo Priet

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Animated Hero Header

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jonathan Dempsey

Links

Made with

  • HTML / CSS / JS

About a code

Hero

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Alain

Links

Made with

  • HTML / CSS / JS

About the code

Lime Hero

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Joshua Ward

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About the code

Slanted Hero

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mariusz Dabrowski

Links

Made with

  • HTML / CSS / JS (Babel)

About the code

Kalli Hero

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Author

  • Laurence Archer

Links

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About the code

Unused Hero

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Nico van Zyl

Links

Made with

  • HTML / CSS (SCSS) / JS

About the code

Skew Animation Hero

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

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Nichola

Links

Made with

  • HTML / CSS (SCSS) / JS

About the code

Hero Animation

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: tweenmax.min.js

Author

  • Reech Studio

Links

Made with

  • HTML / CSS / JS

About the code

Proper Hero

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: animate.css

Author

  • Mikael Ainalem

Links

Made with

  • HTML / CSS / JS

About the code

Night On The Mountain

Text that emerges into a scenic photo with parallax scrolling. This time in CSS (clip-path) rather than in SVG (clipPath) and with scaling, fading, and more drama.

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Animated Hero With JavaScript Canvas

Author

  • Jeffrey Bennett

Links

Made with

  • HTML / CSS / JS

About the code

Animated Hero With JavaScript Canvas

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Danil Goncharenko

Links

Made with

  • HTML / CSS (Sass) / JS

About the code

Hero SVG Animation

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: lottie.js