0

I am trying to make a web effect that works like this:

(It actually has nothing to do with cards, just using cards as an analogy; it will actually be an image. And there is no "stack" of cards, it is just a fixed position in the browser window.)

There are cards placed arbitrarily, and there is a "stack" position.

Hover over a card, and it flips (rotateX 360deg) and translates into the "stack" position.

It remains there while the mouse moves around wherever.

If the mouse hovers over another card, the one on the stack flips back to where it originally was, while the new card flips into the stack position.

And so on...

I am using Chrome 39 and want to do this with the Web Animations API if at all possible, because I believe it will yield the nicest representation. If not, any possible solution Chrome 39 easily supports: CSS, JQuery, JavaScript, Dart, QML, etc.

This junky little animation is all I've got:

<html>
<head><title>Choose a card</title></head>
<body>
<div class="card" style="width:50px;">Foo</div>
<div class="card" style="width:50px;">Bar</div>
<div class="card" style="width:50px;">Baz</div>
<div class="card" style="width:50px;">Qux</div>
<script>
  var elem=document.querySelector('.card');
  var player=elem.animate([
      {transform:"rotateX(180deg) scale(2) translate(10px,10px)"},
      {transform:"rotateX(360deg) scale(3) translate(200px,200px)"}
    ],
    {
      direction: "forward", duration: 250, iterations: Infinity
    });
</script>
</body>
</html>

Appreciate any help!

dwn
  • 543
  • 4
  • 15
  • is that all your css? – Edwin Reynoso Dec 20 '14 at 06:54
  • Heh, I am not much of a web coder - hoping to learn by example, since I'm having a hard time understanding how all these events and properties should actually be implemented in the magic cocktail of web scripts – dwn Dec 20 '14 at 14:19
  • may I ask why are you trying to learn how to animate first? – Edwin Reynoso Dec 20 '14 at 15:04
  • I have some PNaCl apps I've been working on. They all run in a 640x480 div. I want the user to be able to hover over a thumbnail of the one they want, it flips into place in the 640x480 div, shows a description, and begins downloading in the background. Then, when they click on the description, the webpage background for that app fades in and it begins running in that same div. Yes, I realize the animation and fade-in are all superfluous and add incompatibilities, but it makes it nicer IMO. – dwn Dec 20 '14 at 15:10
  • 1
    go here: http://jsfiddle.net/baxtxqhn/#&togetherjs=dm570k4nuu – Edwin Reynoso Dec 20 '14 at 15:27

0 Answers0