Collection of hand-picked free vanilla JavaScript hero effect code examples.

10 JavaScript Hero Effects

Collection of hand-picked free vanilla JavaScript hero effect code examples.

Related Articles

  1. CSS Hero Effects

Author

  • Alain

Made with

  • HTML / CSS / JS

About the code

Lime Hero

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

Responsive: yes

Dependencies: -

Author

  • Joshua Ward

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

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

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

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

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

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

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

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

Made with

  • HTML / CSS (Sass) / JS

About the code

Hero SVG Animation

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

Responsive: yes

Dependencies: lottie.js

back to top