25+ JavaScript Hero Effects - Free Code + Demos

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

1. Lime Hero

Author: Alain (AlainBarrios)

Links: Source Code / Demo, Www.li.me

Created on: December 3, 2019

Made with: HTML, CSS, JS

Tags: css, javascript, animation, scroll

2. Slanted Hero

Author: Joshua Ward (joshuaward)

Links: Source Code / Demo

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

Author: Mariusz Dabrowski (MarioD)

Links: Source Code / Demo, Dribbble Shot

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)

Links: Source Code / Demo, Codepen.io

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)

Links: Source Code / Demo

Created on: September 17, 2019

Made with: HTML, SCSS

6. Proper Hero

Author: Reech Studio (ReechStudio)

Links: Source Code / Demo

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)

Links: Source Code / Demo

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)

Links: Source Code / Demo, Codepen.io, Codepen.io

Created on: January 29, 2019

Made with: HTML, CSS, JS

Tags: javascript, canvas, animation, heros, circuitboard