Shuffl


Download Visit page

This is just a small project about css animation, html5 and javascript. This is not a finalized game. Its more like a playable demo. The main focus was the mobile platform. Make it work smooth an feel good on mobile platforms as well as on desktop.

You can download the full Game with commented Code. You may push it further an make a fully blown out html5 shuffle!!

 

css animations

CSS3 animations make it possible to animate transitions from one CSSstyle configuration to another. Triggered by the click or touch from the user. Here comes Javascript to change the position accordingly.

 

Make sure the css object will be animated. Also insert “translateZ(0)” to make sure the animations are hardware accelerated.

Trigger the animation by changing some values in css via javascript.

The way of animating dom elements with css makes it hardware accelerated on most platforms. Which make the animation look and feel smooth. Even on mobile platforms. Some of the elements shadow properties in css slows it down. This is a common problem with css animations and shadows. Just remove them for a even smoother animation.

 

mobile optimized

This game is perfect for mobile devices. Its not only css driven as shown above. It has also the ability to play it direct from Springboard(only iOS). With a custom icon and splash screen. To have this features in your html5 app you need the following lines in your html file. And of course all the icon images in place.

 

conclusion

In just about a 150 lines of fully commented Javascript code. The result was actually great. It worked perfectly on any mobile device i’ve tested it on. Also no problems in any desktop browser.

 

tools

icn_gimp-150x150