Dustin Horne

Developing for fun...

Metro Style UI With jQuery

Lately I've been toying around with the idea of incorporating Metro style elements into web designs.  It seems to be a trendy thing to do lately and a lot of sites have been doing it so I started experimenting with using jQuery to achieve some of the effects.  There are already several Metro plugins for jQuery and jQuery UI but I wanted to write my own code and see what kind of effects I could achieve.  I've setup a demo site that I'm using my my Metro UI playground. 

If you want to see what I've setup you can view the source however I'll caution you that I'm just hacking it together for now and it's nowhere near production ready.  The purpose of the site and code for now is to just incorporate the visual and functional elements.  Once I'm happy with the results, I'll be rewriting and refactoring all of the javascript to make it suitable for use and especially easier to theme with CSS (currently alot of the CSS is being implemented stricly with javascript so I can tweak it easily).

I have several demos setup already.  The live tiles use setInterval and run on a constant loop currently but I will be modifying them to use a setTimeout and make them "pausable" and allow the animations to be changed and removed as well, and hopefully a more solid base of animations.  I'll also be working on compatibility with touch screen devices.  Here is a list of the currently available demos:

Live Tiles
List
Scrollbox
Pivot