Menu
So I've built a very small demo of an old fashioned rolodex-style clock. The graphics are from a freebie PSD and I've built the clock functionality using setInterval(). You can check out the live demo here.
What I'm trying to do is animate the change in numbers so that the top part "flips" down to display the new number. I'm definitely lost as to how I should go about this - I could use bg images but I feel that numbers in straight HTML are more user-friendly. Can anybody point me in the right direction for this? I would love any help I can get... I also included a preview image below so you can get an idea of what I'm building.
Also I'm open to trying a CSS3 solution, but I haven't found one which works better than jQuery thus far.
547
I'll admit this is only half an answer; it shows how to use CSS/JQuery to animate the rolling effect.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="transformjs.1.0.beta.2.min.js"></script>
<style>
body {font-size:128px;}
</style>
<script>
$(function(){ //OnInit
$('.anim').click(function() {
$(this).animate({ rotateX: '-='+(Math.PI/2), },500,"",
function(){ //OnComplete
var n=(parseInt($(this).html())+1)%10; //Turn 7 into 8, etc.
$(this).html(n.toString()); //Update number while it is hidden
$(this).animate({ rotateX: '+='+(Math.PI/2) },500); //Rotate it back
}
);
});
});
</script>
</head>
<body>
<div class="anim" style="float:left">1</div><div class="anim" style="float:left">2</div><div class="anim" style="float:left">3</div>
</body>
</html>
It needs JQuery 1.5.1+, and the transformjs library, which can be downloaded here. Click on each number to spin it. Tested in Firefox 11 and Chromium 17; transform.js should do something that will work in older browsers and IE.
BTW, speaking of cross-browser challenges, I originally had the three numbers on <span>s. This works in Firefox, but Chrome won't animate them! Hence the change to the <div>s with float:left.
Like I said, it is only half a solution, as it does not quite look like a flip card yet. I think this can be done with a bit of masking, and creating a temporary div on top of the number (the real div will have the next number; the previous number will be in that temporary div, on top). But I couldn't get that working before I ran out of time.
I still thought it was worth posting though; try adding a rotateY and rotateZ, alongside the rotateX in the animation, for some really kewl effects.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
