Archive for the 'Examples' Category

An alternative way to addEventListener

I can’t believe none of us knew DOM2
This is how a tweet from @SubtleGradient, re-tweeted by @jdalton, has been able to steal my rest tonight … and this post is the consequence …
What’s new in a nutshell
There is a W3C Recommendation about addEventListener behavior, which clearly specify the second argument as an EventListener.
The new part [...]

MagnifyMa: A CSS magnifying glass

Jack Prosser has fun proof of concept CSS magnifying glass. He told us a little about it:

The main concept works on using CSS3 for the radius, making a round circle view point. This contains an iframe which is the exact same content. Using CSS3 again I scale the content in the iframe so that it [...]

Realtime ray tracing^H^H^H^H^H^H texture mapping with JavaScript

We have posted about ray tracing before, and now we have another example by Jonas Wagner:

The environment is mapped using cube mapping. I store all the values of the cubemap as floats. I increase the definition range by multiplying all values bigger than 0.95 with 2. This makes sure that the bright parts of the [...]

Build a Fish Tank with Canvas and CSS3

Greg Murray has an early beta of a fun sample app: HTML5 Fish Tank. The app lets you build out your fishes, and then place them in the tank.
It puts the low level Canvas and CSS3 transitions/transforms to work.
E.g.
PLAIN TEXT
HTML:

<div id=”1275463173677″ class=”fish” style=”-webkit-transition-duration: 3369ms; -webkit-transform-origin-x: 508px; -webkit-transform-origin-y: 485px; -webkit-transform: rotateY(0deg) translate(508px, 485px); “><div style=”position: [...]

Golingo: a great Titanium mobile Web game, open sourced for you

Jacob Waller created an addictive word came in Golingo. What sets it apart?

Not a single line of Objective-C written, courtesy of Titanium Mobile

Only one (!) image ingame – the rest is CSS3 magic

Fluid gameplay thanks to CSS Transitions and Animations

All logic using pure, beautiful JavaScript

Multitouch draggables using iPhone Touch API

Logic encapsulated using Low Pro – [...]

Spiderman Intro in CSS

It’s Friday. How about some Spiderman. In CSS using animation.

JavaScript asynchronous method queue chaining

“Guess who’s back? Back again…..”
The JavaScript slim shady himself…. Dustin Diaz (formerly of YUI - Google, now of Twitter) has taken some time out for his busy coding at Twitter, and photography awesomeness to get back to some JS blogging.
Dustin has written up a pattern that he used in Twitter @anywhere, the asynchronous method queue [...]

Raphael++

Raphael is pure goodness. Dmitry gave a fantastic talk at JSConf, and his library never fails to impress.
There have been a few interesting posts recently. Trotter Cashion kicks things into gear as he declares his love and then goes on to show how you can unit test Raphael with some mocks.
Then we learn how easy [...]

Scrollin’ Scrollin’ Scrollin’ to the NextPoint

This is a guest post from the folks at Nextpoint. We’ve previously mentioned their pioneering use of Ajax in the legal industry and open sourcing of Growl4Rails. Here they bring us some details on their scrollable-document interface — make sure to make it to the end of the post for a link to [...]

Ambilight Sample; video and canvas

Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect.
As the video runs, a snapshot is sent over to JavaScript land where colors are worked out:
PLAIN TEXT
JAVASCRIPT:

 

function getMidColors(side) {

        var w = buffer.width,

                [...]