11 EXPERIMENTAL JAVASCRIPT PROJECTS THAT PUSH THE LIMITS OF WRITING
Web technology grows much more with each passing year. I am
constantly surprised by the incredible projects with which I stumble and the
level of detail that comes with its construction.
I recently covered some crazy CSS projects and in this post
I want to do it the other way.
I have tracked the web in search of 11 of the best projects
promoted by JS that exist. All these are executed in Code Pen, so they are open
source and easy to edit / forked if you want to play.
1. Brave rabbit race
The developer Karim Malouf has made some impressive snippets
with JavaScript, but this simple web application has to be among my first
three.
The rabbit web application is super creative and very
technical. It is based on Three.js for animation and rendering, along with
TweenMax.js for animation styles.
But this also handles user input and plays music in the
background. It really is like an interactive game built on the web that uses
some very structural building blocks.
2. COOL THE LION
Here is another great project created by Karim and follows a
fairly simple format.
The cursor position controls a hand fan that blows air over
a hot lion. This is also processed using Three.js and the entire project
responds completely to boot.
You can change the size of the window to a pea and it will
continue to fit on the screen.
Simply move the cursor to place the fan and click on hold to
start a smooth and pleasant breeze. Your new lion friend should respond with
kindness.
3. SOFT FISH
With this pen the real characteristics are very simple. It
is the exhibition and aesthetics that caught my attention.
In this Mighty Fish app you can move the cursor to the left
or right side of the screen to encourage the fish to move. It will fly beyond
different objects in the environment with real 3D effects.
Of course, this is just a sample, but it is a powerful
example of object manipulation based on user information. The script
automatically adjusts to speed based on cursor position, something you can use
in complex projects or parallax websites to create some incredible effects.
4. PULL-TO-REFRESH PAPER PLANT
With this extraction animation to update, I have to give the
hat to the developer Nikolay Talan. It is elegant, fun to watch and built only
in jQuery.
Most of these charging animations are fast and are based
mainly on smart phone SDK. But this web application runs in CSS / JS code and
is mainly based on jQuery as the only included library.
If you look closely, you will even notice that the trees in
the background swing back and forth when the plane flies. It is this level of
detail that forced me to add this fragment to the list.
5. CANVAS FIRE FIRES
We've all seen some very interesting effects with the HTML5
canvas element and it's fast becoming a treasure for web developers.
This Jack Rutile pen shows that you can create some great
effects with a canvas element + a little jQuery.
In this fragment you can click anywhere on the canvas to
automatically launch the fireworks into the air. They follow a path to the
click location where they explode on a dazzling light screen.
You can even alter the animation effects by using the small
toolbar on the side.
6. LONG SHADOWS
The material design styles of Google 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 complicated concept because you need to define how
close the cursor is to certain elements, and then make the long shadows adapt
to that position accordingly.
Perhaps the best thing about this pencil is that it runs in
pure JavaScript to create the long shadow effect. Really impressive!
7. INTERACTIVE CANVAS
In this simple piece of code, you can manipulate the
elements of the page with the mouse cursor simply by moving them over them.
It is probably not as innovative as other elements of this
list, but it is also not the easiest effect to replicate. Getting the small
orbs to move in unison is not easy and the same is true with the detection of
floating states.
But developer Tim Holman has a lot of similar fragments in
his account if he wants to look for more.
8. CAT VS WOOL BALL
Going back to some Three.js codes, we have this fun project
also created by master coder Karim Malouf.
When you slide the mouse across the screen, follow a small
ball of wool. The digitized cat keeps an eye on the ball and does not lose
focus, no matter how fast you go.
But the coolest part is when you hang the ball right in
front of the cat. Actually, he's going to hit the ball. It even moves
realistically!
9. PARANOID VS SHY BIRDS
This is a bit simpler but it also shows what you can do with
some creativity and JavaScript knowledge.
As you move the cursor through this pencil, you will attract
the attention of two little birds. If your focus is directed to one side, the
little bird will stop looking in your direction.
This works by filtering where the eyes of the bird are
focused and if they can see a bird on each side. It is possible that this is
not as complex as you would find it in mobile games, but it is certainly a good
project for the web.
10. ADVANCED ANIMATION ROUTE
While this demonstration is not very interactive, it still
catches your attention.
This roller coaster animation runs on canvas elements along
with jQuery animations on the Tween ax.
The complete route of the animation is coded in a
personalized way and you will even find several roller coasters that move
simultaneously. It is a good example of what is possible with the background
elements if you know the basic scripts.
11. MOTOR POKÉMON JS / CANVAS
I've saved the most exclusive to the end with this crazy
canvas project that mimics a web-based Pokémon environment.
Everything works to support music, sprites and movement. Not
to mention that with the "activated" debug mode, you can manipulate
the environment and change the location of almost everything.
You can learn a lot by playing with this type of code. And
this project is available on GitHub for free if you want to get a copy and play
with yourself.
