CODEWITHSUNDEEP
jqueryhtmlmicrosoft-metrotiles
Voidsbane
Voidsbane

Reputation: 231

Simulating flipping live tiles in html

I need to code some html square "live tiles" that flip between 4 states periodically. Basically what I need is what this plug-in does http://www.drewgreenwell.com/projects/metrojs, but between 4 states, not just 2. Is there a definitive API/plug-in that allows live tile management in html/jquery sites? I'm not building a Windows 8 app, I'm just trying to simulate Live Tiles flipping in Html, and hopefully have it work in all major browsers. Thanks.

Upvotes: 6

Views: 20584

Answers (5)

Disco Banana
Disco Banana

Reputation: 102

You can use jQuery or jQuery UI to get this effect. jQuery has .animate(), .show(), .hide() and other methods that can help.

Upvotes: -2

Voidsbane
Voidsbane

Reputation: 231

In the end, it seems that Drew's plug-in does support multiple tile states, he provided a couple of samples. Sample 1 and Sample 2. It seems to do what I need for live tile simulation.

Upvotes: 5

Jeff Mahoney
Jeff Mahoney

Reputation: 231

You might consider reading this article (below) on how to do flips with CSS3/HTML5 transitions. It's not Javascript (and thus doesn't have an API), but in my experience transition effects seem to be a little more reliable in their smoothness.

Animated Element Wall With CSS

Upvotes: 1

Dominic Hopton
Dominic Hopton

Reputation: 7292

This should be pretty easy. Specifically:

  • Create a DIV with your N tile-sized contents
  • Clip it/size the parent div to 1 tile size
  • Make sure that overflow is hidden.
  • Apply translate's to the previous content & new content using CSS

Then everything should be fine.

Upvotes: 0

kei
kei

Reputation: 20481

I'm just trying to simulate Live Tiles flipping in Html, and hopefully have it work in all major browsers

I think this is what you need. Flip! http://lab.smashup.it/flip/

Upvotes: 4

Related Questions