Seeing the full javascript rotating 3d cube [1], I was wondering,
What are the most stunning javascript-only effects you've ever seen?
the javascript parallax is pretty interesting, here is a demo [1]
Edit: I just found a Firefox add-on that uses this effect for the new tab page.
Auto Dial 3D [2]
Edit2: And someone doing it without javascript at all (just css)
CSS 3D menias [3]
Edit3: Someone using the effect in a great way to tell a story
[1] http://webdev.stephband.info/parallax.htmlHere's a bunch of "processing" graphics: http://ejohn.org/blog/processingjs/ demos are located near the bottom.
I think my favorite would be http://ejohn.org/apps/processing.js/examples/custom/substrate.html
Although this snake guy is pretty cool and interactive: http://ejohn.org/apps/processing.js/examples/custom/snake.html
This site [1] has a pretty nice implementation of solitaire, including card animation, all in JavaScript.
[1] http://www.worldofsolitaire.com/This site has an entire OS (an old one, btw :) in javascript: chiptune.com [1].
[1] http://www.chiptune.com/Antisocial [1] is definitely the best js graphics demo I've seen. Don't miss the 'play with the demo tool' link (after watching the demo, of course).
Enjoy.
[1] http://antisocial.demozoo.org/Hypno trip down the fractal rug - for the 20 lines JavaScript contest - Zoom by Mathieu 'p01' Henri [1]
(Doesn't work well on IE or Chrome.) Update: It now works great on Chrome.
[1] http://www.p01.org/releases/20%5Flines%5Fhypno%5Ftrip%5Fdown%5Fthe%5Ffractal%5Frug/?The coolest JavaScript effects I've seen are the Google Chrome experiments. http://www.chromeexperiments.com/
Obviously they will work best with Google Chrome browser, but some work in other browsers.
I thought this was pretty impressive:
http://safalra.com/web-design/javascript/mac-style-dock/demonstration.html
With an admittedly "cursory" investigation, these demos confirm that Chrome beats Firefox and IE for Javascript-heavy apps.
I like Algorithm Ink [1] a lot. It's a javascript port & extension of Context Free [2] by Aza Raskin.
Click on the canvas, they're interactive.
And click on Edit, and change the pattern generation algorithm live.
[1] http://azarask.in/projects/algorithm-inkI've always loved everything that script.aculo.us [1] allows you to do. Update: raphaeljs [2] also looks like a great framework!
[1] http://script.aculo.us/This is a "mouse follow" javascript animation from 2002 or earlier, the smoothness and accuracy makes for a pleasing effect. I could only find a version that ran in IE, but it is worth firing up IE or IETab and taking a look:
Link: Mouse Trail Clock [1]
[1] http://javascript.internet.com/time-date/mousetrailclock.htmlThe JS909 drum sequencer. Written without using a JS library, and even the sounds are done by Javascript
http://www.themaninblue.com/experiment/JS-909/
I've found these two sites quite facinating:
Using Canvas: http://9elements.com/io/projects/html5/canvas/
and
plain old javascript: http://www.uize.com/index.html, if nothing else, I find the 33 different image transitions available worth looking at this one.
Shameless plug: Canvas Image Distortion [1].
[1] http://stackoverflow.com/questions/2059130/waving-text-on-canvas/2059219#2059219Not really graphical, but still stunning (even if I do say so myself)...
A long time ago, I wrote an HTML editor in HTML/Javascript.
You can download it here: http://www.boltbait.com/htmleditor/
One of these days, I'll update it for CSS. :)
I made myself a few interesting graphical effect in pure javascript (eventually with use of framework, for simplicity).
You can see it here, on mine blog: http://wilq32.blogspot.com/
For ex.:
Make normal image, rotatable (http://wilq32.googlepages.com/wilq32.rollimage22),
Canvas game prototype (http://wilq32.googlepages.com/home322)
Some simple morph animations (http://wilq32.googlepages.com/home32)
Pseudo 3d gallery(http://wilq32.googlepages.com/wilq32.rollimage)
This isn't necesarily amazing, but it's fun: paste into browser bar.
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)x4+x5)+"px"; DIS.top=(Math.cos(Ry1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);
I was most impressed by this 512 byte Menger sponge: JSpongy [1]
There are also a lot of interesting effects in the js1k competition results [2]. The other day I was beaten by 1023 bytes of chess.
[1] http://www.p01.org/releases/512b_jspongy/