Interactive Graphics
Page 5
Open & Close Book
Swipe to open and close the antique book with slightly wrinkled pages and an illustration on the right page. An inspirational verse displays on the left page. JavaScript with sprite sheets provide interactivity.
Swipe Left & Right
Book Preparation
The book was modeled and rendered with 3ds Max.
Displacement maps provide wrinkles on the pages.
Animation was generated with the morpher modifier.
An original oil painting,
Revelation Chapter 22
was digitized then mapped to the right page.
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.