Interactive Graphics
Page 10
Image Links Move
Introduction
Consider icons that move and draw attention to highlighted topics. This page includes sample moving icons. Moving icons either rotate, translate or change colors when you tap or hover.
Some graphics appear to rotate in three dimensions or move in two dimensions. Other graphics highlight or change colors.
3D Icons
Three dimensional icons generally rotate as you hover with the mouse or tap with a finger.
Art Icons
Art moving icons highlight graphical features such as lighting a candle, sign, lamp, exploding or increasing in size as you hover or tap.
Games & Graphical Icons
Game moving icons might demonstrate one part of game play. Graphical icons might move, change colors, or both.
Summary
Consider icons that move and draw attention to highlighted topics. This page includes sample moving icons. Moving icons either rotate, translate or change colors when you tap or hover.
Some graphics appear to rotate in three dimensions or move in two dimensions. Other graphics highlight or change colors.
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.