PixelArt45 jQuery Plugin for Isometric Animations
PixelArt45 jQuery Plugin for Isometric Animations
PixelArt45 it's a jQuery Plugin or is trying to be, runing like a SlideShow for Isometric images.
History
----------------------------------------------
Originaly PixelArt45 is born from an 3D CSS3 RPG experiment made by grfxdsgn ( http://jsdo.it/grfxdsgn/A3Fr ) which is a complete CSS3 animation. Discovering the CSS RPG code and later, the "3d popup book" concept, I decided to build a 3D animation in perspective. One week ago I discovered the Pixel Art images created by nasc ( http://www.nasc.fr/ ) and observed that, Pixel Art concept match with CSS3 RPG angle ( same like the Isometric angle ). Of cours, the final code result it is a start and can be improved on next release versions.
*
*
*
How PixelArt45 works:
----------------------------------------------
The image positions ( Top and Left ) are set in a Javascript Object as properties, grouped in Slide Blocks. Each Slide Block can contain an amount of images.
On init, the PixelArt45 is randomly picking a Slide Block, first miliseconds is applying an animation for the floor divs, with can be rotate, scale or perspective. Scale FX is scaling the Divs with CSS "transform" from 1.0 value to 0.6 and back. Rotate FX is turning the floor Divs with CSS "transform" from 0 to 45 degrees and back. Perspective FX is not finished yet. After floor transformation, PixelArt45 reads the content of Slide Block and starts to animate the images from random init positions ( all set somewhere out of page view ), animating all to center of page and back. PixelArt45 can run on 45 mode which means that, the images are using "skew" css transformation proprety to be the skewed to (25,20), option set as AppAngle, and can run also witout AppAngle option, case for isometric images.
On conclusion, this is a 45 Isometric animation experiment, made for fun.
So, feel free to use and to modify the code and why not, feedback to send, eventually.
Demo PixelArt45:
http://maran-emil.de/experiments/demo14/index.html
Video Demo PixelArt45:
https://www.youtube.com/watch?v=8_-Xs0pS8xk
*
*
*
Material used on demo:
----------------------------------------------
Images from Nasc & Ky3bMu4
Tower crane http://www.nasc.fr/pixel-art/tower-crane/
Old building http://www.nasc.fr/pixel-art/old-building/
Truck http://www.nasc.fr/pixel-art/truck/
Emergency vehicles http://www.nasc.fr/pixel-art/emergency-vehicles/
Fire department truck http://www.nasc.fr/pixel-art/fire-department-truck/
Breaking bad RV http://www.nasc.fr/pixel-art/breaking-bad-rv/
Just a small building http://www.nasc.fr/pixel-art/just-a-small-building/
ISO Truck http://www.pixeljoint.com/pixelart/41707.htm
----------------------------------------------
CSS3 Floor by grfxdsgn
http://jsdo.it/grfxdsgn/A3Fr
---------------------------------------------------
*
*
*
PS. More info about Pixel Art you can find here:
Pixel Art PS Brushes:
http://www.nasc.fr/category/brush/
http://www.noskill1343.com/2011/04/10-best-free-pixel-art-photoshop-brush.html
*
*
*
Pixel Arts Colelction Link Pages:
Eye Popping Pixel Art You Should Not Missed!
http://esharkdesign.com/index.php/archive/amazing-pixel-art-you-should-not-missed/
40 great examples of Pixel Art
http://blogof.francescomugnai.com/2009/05/40-great-examples-of-pixel-art/
16-bit Games are Gone but Pixel Art Still Lives
http://www.cracktwo.com/2011/09/16-bit-games-are-gone-but-pixel-art.html
Pixels Go Mad: The Celebration Of Pixel Art
http://www.smashingmagazine.com/2008/05/05/pixels-go-mad-the-celebration-of-pixel-art/
Pixel Art At Its Best â?? 20 Awesome Images
http://www.topdesignmag.com/pixel-art-at-its-best-20-awesome-images/
30 Excellent Pixel Art Tutorials For Pixel Lovers
http://www.hongkiat.com/blog/pixel-art-tutorials/
50 Absolutely Beautiful and Creative Pixel Art
http://www.hongkiat.com/blog/50-beautiful-and-creative-pixel-arts/
25 Wonderful Examples Of Isometric Pixel Arts
http://pixelcurse.com/digital-art/25-wonderful-examples-of-isometric-pixel-arts
More Pixel Arts Galleries:
http://www.flickriver.com/photos/rodhunt/tags/isometricpixelartist/
http://www.behance.net/search?content=projects&user_tags=993693
http://www.newgrounds.com/art/browse/category/pixel-art#page:1
http://pixel-artists.deviantart.com/gallery/?set=24453134
http://www.pixeljoint.com/pixels/new_icons.asp?q=1&pg=1
http://www.nasc.fr/category/pixel-art/
http://dribbble.com/blackmoondev/tags/pixel_art?page=1
http://pinterest.com/source/nasc.fr/
Other amazing pages:
http://www.citycreator.com/
http://www.nasc.fr/
http://www.pixelfreak.com/
http://www.mrwong.de/myhouse/