on this page...
Demonstrators
This is a list of xhtml, css and javascript demos. The idea is to create visual effects which look like they're made in Flash, Java or Silverlight... but they're NOT!For me, these demos show that almost anything is possible to create with techniques common to any modern browser, without the need of external plugins. And in the near future, html5 makes it possible to create even more extensive visual effects right from your basic browser. But it'll probably take some years before everybody (and every platform, like mobile phones) has a html5 capable browser.
Until that time, use xhtml, css, javascript and, most of all, creativity, to create great visuals like the once below.
terra
My first xhtml demo. It's a parallax scrolling demo, where you see a landscape moving by. Parallax scrolling is something I remembered from the old days on the commodore 64. It was used in several games to give platform games a feeling of 3D. It's very simple to create in xhtml, and there are even far more better ways to create this effect than how I've done it. But still... have a look. [view]
skylines
My second xhtml demo. This is already a more sophisticated demo. You'll see a static foreground and behind that, you'll see a moving sky with clouds. But, it's not moving sideways, it's moving towards you, in 3D.The clouds are made from just one 2D image. Check out the info button at the bottom-right to find out how it's done.
One downside to this demo, is that it almost doesn't run on Chrome. The Crome browser copes very poorly with image resizing. Even to the extend that the browser stops reponding.
So this demo actually runs better on Internet Explorer, than it does on Chrome. :-)
Again, the inspiration for the design came from the good old commodore 64. Not only the inspiration, but I also ripped the image of the car from the Outrun game. It is just such a great looking match ;-) [view]
bounce
This demo kind of simulates a trampoline, on which you bounce up an down.The thing which really amazed me during the coding of this demo, was that all major browsers (IE, FF, Chrome) are quicker parsing HTML strings, then they are processing dom element properties. I wasn't even trying to create new elements with DOM, just altering the style properties of existing elements. Still, recreating all the 200+ HTML elements in a string and then passing it to an innerHTML property, is quicker then changing 200+ style properties.
From this demo on, I'm using the innerHTML all the time. Although it's not a W3c standard, it's works on all major (and almost all minor) browsers. [view]
microwave
Craving for a roasted chicken? Just push the button and wait while the waves cook the meat.Sure, I could have simply create an animated gif image and place that on top of the chicken, but creating waves without any images is so much more fun to do. [view]
stretch-a-box
This is somewhat the crown on my demo work. Vector graphics with plain xhtml.What you'll see are three flexible stretching boxes on a 45 degree rotation, moving ans stretching through eachother. I think this demo really demonstrates that you can do anything with creativity.
If you're viewing this in Internet Explorer (8 and below), you won't have the nice looking transparency on the boxes. So for the extra wow-effect, view it in Firefox or Chrome.
Check out the info button on the bottom-right of the screen for an explanation on how it's done.
[view]
Websites
This is an overview of websites I've created. Some for myself, some for others. Always using only xhtml, css2 and javascript.
comming soon. under construction.
