25+ JavaScript Hero Effects - Free Code + Demos
Collection of 25+ JavaScript Hero Effects. All items are 100% free and open-source.
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
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
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
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
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
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
Author: Danil Goncharenko (Danil89)
Links: Source Code / Demo
Created on: June 15, 2018
Made with: HTML, Sass, JS
Tags: svg, animation, lottie, section
10. Neat Parallax Hero Effect
Some javascript magic to make this nifty little parallax hero.
Author: magnificode (magnificode)
Links: Source Code / Demo
Created on: September 21, 2015
Made with: HTML, SCSS, JS
Tags: javascript, parallax, look out medium
11. Webpage Hero Header - Scroll Effects
Fixed background scaling, text transition. + a bouncy SVG arrow, Yay!
Author: Eric Porter (EricPorter)
Links: Source Code / Demo
Created on: July 17, 2016
Made with: HTML, SCSS, JS
Tags: css, background, scroll, svg, header
12. Deep Hero Effect
Author: Luis Ramirez (BeatDeer)
Links: Source Code / Demo
Created on: February 11, 2018
Made with: HTML, CSS, JS
13. Parallax Hero
Author: Michael Fangman (michaelfangman)
Links: Source Code / Demo
Created on: January 30, 2014
Made with: HTML, SCSS, JS
Tags: parallax, hero, css, header
14. Webpage Hero Header - Scroll Effects
Fixed background scaling, text transition. + a bouncy SVG arrow, Yay!
Author: mike foskett (2kool2)
Links: Source Code / Demo
Created on: April 29, 2017
Made with: HTML, CSS, JS
Tags: css, background, scroll, svg, header
15. GreenSock Hero Image Tilt Animations
Author: Daniel Adusei (danadusei)
Links: Source Code / Demo
Created on: April 14, 2016
Made with: HTML, CSS, JS
16. Interactive Hero Banner Concept
Author: Kamol (Sagwan)
Links: Source Code / Demo
Created on: November 5, 2017
Made with: HTML, CSS, JS
17. Coming Soon Hero Section Pure Tailwind 6th
Author: Componentity (componentity)
Links: Source Code / Demo
Created on: August 14, 2020
Made with: HTML, CSS
Tags: tailwind, block, hero, template, soon
18. Animation Fox Hero Meteorites
Author: Wikyware Net (wikyware-net)
Links: Source Code / Demo
Created on: July 8, 2020
Made with: HTML, CSS, JS
Tags: animation, fox, hero, meteorites, fly
19. GSAP ScrollTrigger - Pinned Section Animation
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
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
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
More Awesome Lists:
Share: