Web technology grows so much larger with each passing year. I’m constantly stunned by the amazing projects I stumble onto and the level of detail that goes into building them.
Recently I covered some crazy CSS projects and in this post I wanna take it the other way.
I’ve scoured the web looking for 11 of the coolest JS-powered projects out there. All of these run on CodePen so they’re all open sourced and easy to edit/fork if you wanna play around.
1. Valorous Rabbit Run
Developer Karim Maaloul has made quite a few impressive snippets with JavaScript, but this simple webapp has to be in my top three.
The rabbit run webapp is super creative and really technical. It relies on Three.js for animation and rendering along with TweenMax.js for the animation styles.
But this thing also handles user inputs and plays music in the background. Really it’s like an interactive game built on the web using some very structural building blocks.
2. Chill the Lion
Here’s another neat project created by Karim and it follows a pretty simple format.
Your cursor position controls a handheld fan that blows air onto a hot lion. This is also rendered using Three.js and the entire project is fully responsive to boot.
You can resize the window down to a pea and it’ll still fit onto the screen.
Just move your cursor to position the fan and click+hold to start a nice gentle breeze. Your new lion friend should respond in kind.
3. Mighty Fish
With this pen the actual features are very simple. It’s the display and aesthetic that grabbed my attention.
In this Mighty Fish app you can move your cursor to the left or right side of the screen to animate the fish into motion. It’ll fly past different objects in the environment with real 3D effects.
Granted this is just a sample demo but it’s a powerful example of manipulating objects based on user input. The script automatically adjusts for speed based on your cursor position, something you can use in complex projects or parallax websites to build some incredible effects.
4. Paper Plane Pull-To-Refresh
With this pull-to-refresh animation I have to tip my hat to developer Nikolay Talanov. It’s elegant, fun to watch, and built solely on jQuery.
Most of these loading animations go quick and they’re primarily built on smartphone SDKs. But this webapp runs on CSS/JS code and relies mostly on jQuery as the only included library.
If you watch closely you’ll even notice that the trees in the background sway back & forth when the airplane flies by. It’s this level of detail that compelled me to add this snippet into the list.
5. Canvas Fireworks
We’ve all seen some pretty cool effects with the HTML5 canvas element and it’s quickly becoming a treasure for web developers.
This pen by Jack Rugile shows that you can build some darn cool effects with a canvas element + a bit of jQuery.
In this snippet you can click anywhere on the canvas to automatically launch fireworks into the air. They follow a trajectory to the click location where they explode into a dazzling light display.
You can even alter the animation effects using the small toolbar on the side.
6. Long Shadows
Google’s material design styles pushed long shadows into the mainstream for web designers. But few designers use long shadows with a light source like this pen.
This is a tricky concept because you need to define how close the cursor is to certain elements, then make the long shadows adapt to that position accordingly.
Perhaps the coolest thing about this pen is that it runs on pure JavaScript to create the long shadow effect. Really impressive!
7. Interactive Canvas
In this simple snippet you can manipulate page elements with your mouse cursor just by moving over them.
It’s probably not as groundbreaking as some other items in this list, but it’s also not the easiest effect to replicate. Getting the little orbs to move in unison isn’t easy and the same goes for detecting hover states.
But developer Tim Holman has a bunch of similar snippets on his account if you wanna dig around for more.
8. Cat vs Ball of Wool
Getting back to some Three.js codes we have this fun project also created by master coder Karim Maaloul.
When you flip your mouse around the screen a small ball of wool follows. The digitized cat keeps its eye on the ball and doesn’t lose focus no matter how fast you go.
But the coolest part is when you hang the ball right in front of the cat. It’ll actually swat the ball around. It even moves realistically!
9. Paranoid vs Shy Birds
This one’s a bit simpler but also demonstrates how much you can do with some creativity and JavaScript knowledge.
As you move your cursor through this pen you’ll catch the attention of two little birds. If your focus goes towards one side that baby bird will immediately stop looking in your direction.
This works by filtering where the bird’s eyes are focused and if they can see a bird on either side. Granted this may not be as complex as you’d find in mobile games but it’s certainly a neat project for the web.
10. Advanced Animation Path
While this demo isn’t very interactive it does still grab your attention.
This roller coaster animation runs on canvas elements along with jQuery animations on TweenMax.
The entire animation path is custom coded and you’ll even find multiple roller coasters zooming around simultaneously. It’s a cool example of what’s possible with background elements if you know your way around basic scripting.
11. Pokémon JS/Canvas Engine
I’ve saved the most unique one for last with this crazy canvas project mimicking a web-based Pokémon environment.
The entire thing works to support music, sprites, and movement. Not to mention with debug mode “on” you can manipulate the environment and change up the placement of pretty much everything.
You can learn a lot by messing around with this type of code. And this project is available on GitHub for free if you wanna grab a copy and tinker with it yourself.
