Logo Rotates & Color Changes
Page 11
Sprite Sheet
Swipe to rotate the 3D logo. Tap to change colors.
Swipe! Tap!
Preparation
The logo was modeled and rendered with 3ds Max. The sprite sheets were composed with Photoshop and output as an eight bit PNG images.
JavaScript draws images and portions of sprite sheets onto the HTML5 canvas.
Learn Sprite Sheets
The logo rotates as you swipe with sprite sheets, HTML5 and JavaScript. Learn to prepare sprite sheets with the Kindle book, HTML5 Sprite Sheets.
Learn to Create Sprite Sheets
Learn the basics of sprite sheet design and development.
This short book explains how to create animated graphics with HTML5 sprite sheets. Learn how to prepare sprite sheets with JavaScript, HTML markup and Photoshop, or a similar graphics application. Learn to arrange sprite sheet images and display animation online with code.
This book demonstrates how to create three sprite sheet animations:
- Spinning Android Tablet
- Explosion
- Exploding Coffee Pot
Each animation includes different techniques. The spinning Android covers the basics of sprite sheet animation with JavaScript and HTML. The explosion includes an array of coordinates, try-catch blocks, lighting and transparency effects. The exploding coffee pot adds background graphics. The full source code's included with this book along with links to the graphics and JavaScript for each project.
Sprite sheet animation runs on any phone, tablet or computer with an HTML5 compatible browser, which includes most current Androids, iPhones, Windows and Macintosh computers.
Select a Country. E-book on Amazon Kindle:
Buy HTML5 Sprite Sheets
plus HTML5 Rotation
and
HTML5 Color Animation
for an overall reduced price with HTML5 3 Books in 1
!
HTML5 3 Books in 1
Select a Country. E-book on Amazon Kindle:
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.