25+ JavaScript Hero Effects - Free Code + Demos

Collection of 25+ JavaScript Hero Effects. All items are 100% free and open-source.

1. Lime Hero

JavaScript Hero Effects - Lime Hero
Author: Alain (AlainBarrios)
Created on: December 3, 2019
Made with: HTML, CSS, JS
Tags: css, javascript, animation, scroll

2. Slanted Hero

JavaScript Hero Effects - Slanted Hero
Author: Joshua Ward (joshuaward)
Created on: October 3, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

3. Kalli Hero

JavaScript Hero Effects - Kalli Hero
Author: Mariusz Dabrowski (MarioD)
Created on: July 22, 2019
Made with: HTML, CSS, Babel
Tags: slider, greensock, hero, ui8

4. Skew Animation Hero/SVG With Scroll

JavaScript Hero Effects - Skew animation hero/SVG with scroll
Add a bit of animation to SVG polygon/diagonal lines when scrolling with a few lines of JavaScript. Inspiration: https://codepen.io/erikdkennedy/pen/ygpwZg
Author: Nico van Zyl (nicovanzyl)
Created on: May 4, 2019
Made with: HTML, SCSS, JS
Tags: svg, diagonal, animation, vanilla-js, hero

5. Hero Animation

JavaScript Hero Effects - Hero Animation
Author: Clifton T Canady (cliftonc0613)
Created on: September 17, 2019
Made with: HTML, SCSS

6. Proper Hero

JavaScript Hero Effects - Proper Hero
Author: Reech Studio (ReechStudio)
Created on: February 15, 2019
Made with: HTML, CSS, JS

7. Night On The Mountain

JavaScript Hero Effects - Night on the mountain
A remake of my pen parallax clip. 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. Poem by George Sterling and photo from unsplash.com by Marc Steenbeke
Author: Mikael Ainalem (ainalem)
Created on: February 12, 2019
Made with: HTML, CSS, JS
Tags: mountains, parallax, poem, drama, nature

8. 🍴Fork: Animated Circuitboard⁩ Hero With JavaScript Canvas⁩

JavaScript Hero Effects - 🍴Fork: Animated Circuitboard⁩ Hero with JavaScript Canvas⁩
Searching through the archives, I found this. I have a LOT more where these came from. Stay tuned and follow me at https://codepen.io/PickJBennett/ to see new pens, which I will be posting soon! // Original pen by Simon FREMAUX @ https://codepen.io/dievardump/pen/pyOMeN
Author: Jeffrey Bennett 😃 (PickJBennett)
Created on: January 29, 2019
Made with: HTML, CSS, JS
Tags: javascript, canvas, animation, heros, circuitboard

9. Hero SVG Animation

JavaScript Hero Effects - Hero SVG animation
Author: Danil Goncharenko (Danil89)
Created on: June 15, 2018
Made with: HTML, Sass, JS
Tags: svg, animation, lottie, section

10. Neat Parallax Hero Effect

JavaScript Hero Effects - Neat Parallax Hero Effect
Some javascript magic to make this nifty little parallax hero.
Author: magnificode (magnificode)
Created on: September 21, 2015
Made with: HTML, SCSS, JS
Tags: javascript, parallax, look out medium

11. Webpage Hero Header - Scroll Effects

JavaScript Hero Effects - Webpage Hero header - scroll effects
Fixed background scaling, text transition. + a bouncy SVG arrow, Yay!
Author: Eric Porter (EricPorter)
Created on: July 17, 2016
Made with: HTML, SCSS, JS
Tags: css, background, scroll, svg, header

12. Deep Hero Effect

JavaScript Hero Effects - Deep Hero Effect
Author: Luis Ramirez (BeatDeer)
Created on: February 11, 2018
Made with: HTML, CSS, JS

13. Parallax Hero

JavaScript Hero Effects - Parallax Hero
Author: Michael Fangman (michaelfangman)
Created on: January 30, 2014
Made with: HTML, SCSS, JS
Tags: parallax, hero, css, header

14. Webpage Hero Header - Scroll Effects

JavaScript Hero Effects - Webpage Hero header - scroll effects
Fixed background scaling, text transition. + a bouncy SVG arrow, Yay!
Author: mike foskett (2kool2)
Created on: April 29, 2017
Made with: HTML, CSS, JS
Tags: css, background, scroll, svg, header

15. GreenSock Hero Image Tilt Animations

JavaScript Hero Effects - GreenSock hero image tilt animations
Author: Daniel Adusei (danadusei)
Created on: April 14, 2016
Made with: HTML, CSS, JS

16. Interactive Hero Banner Concept

JavaScript Hero Effects - Interactive Hero Banner Concept
Author: Kamol (Sagwan)
Created on: November 5, 2017
Made with: HTML, CSS, JS

17. Coming Soon Hero Section Pure Tailwind 6th

JavaScript Hero Effects - Coming Soon Hero Section Pure Tailwind 6th
Author: Componentity (componentity)
Created on: August 14, 2020
Made with: HTML, CSS
Tags: tailwind, block, hero, template, soon

18. Animation Fox Hero Meteorites

JavaScript Hero Effects - Animation Fox Hero Meteorites
Author: Wikyware Net (wikyware-net)
Created on: July 8, 2020
Made with: HTML, CSS, JS
Tags: animation, fox, hero, meteorites, fly

19. GSAP ScrollTrigger - Pinned Section Animation

JavaScript Hero Effects - GSAP ScrollTrigger - Pinned Section Animation
Author: Ryan Mulligan (hexagoncircle)
Created on: May 22, 2020
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: greensock, gsap, scrolltrigger, animation, hero