Interactive Graphics
Page 6
Burning Digits
Swipe left and right to view rotating burning digits with swirling, rippling fire.
Swipe Left & Right
3D Simulation
As you swipe, digits appear to rotate around their Y axis. Flames rise, simulating waves of smoke and fire in the air. This example demonstrates 2.5D responsive Web design. The numbers are not three dimensional, however JavaScript with HTML5 and sprite sheets, provide the illusion of three dimensions.
Preparation
One digit was modeled with 3ds Max. Frames of the animation were placed together in a sprite sheet, modified with Photoshop then rendered with JavaScript and HTML5.
Sprite Sheet
Sprite sheets combine multiple frames of an animation sequence into one graphic file. Software increments the X and Y pixel coordinates, within the graphic file, to display frames in order. This example displays frames of digits based on canvas touch points.
As you move your finger, or mouse, across the display screen, code calculates which frame to display.
Interactive Graphics
Interactive graphics respond to touch, mouse or tap motion.
2.5D Models
Many examples demonstrate 2.5D
models.
The graphics appear three dimensional.
You can swipe to rotate or view the graphics,
yet they're actually two
dimensional sprite sheets.
Two dimensional sprite sheets render with JavaScript and the HTML5 2D canvas.
HTML5 Graphics Interaction
Image maps and scaleable image maps, react to areas within an image. Picture tags allow developers and designers to display different versions of an image based on screen size or orientation.
JavaScript Interaction
JavaScript includes a long list of event listeners. Window and element event listeners respond to touch movement, taps, mouse movement, window resize events, clipboard, keyboard and form events.
CSS Graphics Interaction
With CSS3 designers can animate properties including location, scale, color and opacity.