Animazione di un effetto Flip-Down Rolodex con jQuery

Così ho creato una demo molto piccola di un orologio stile rolodex vecchio stile. La grafica proviene da un PSD di Freebie e ho costruito la funzionalità di clock usando setInterval(). Puoi dare un'occhiata allo the live demo here.Animazione di un effetto Flip-Down Rolodex con jQuery

Quello che sto cercando di fare è animare il cambio di numeri in modo che la parte superiore "si inverta" verso il basso per visualizzare il nuovo numero. Sono definitivamente perso su come dovrei andare su questo - potrei usare le immagini di bg ma ritengo che i numeri in HTML diretto siano più user-friendly. Qualcuno può indicarmi la giusta direzione per questo? Mi piacerebbe tutto l'aiuto che posso ottenere ... Ho anche incluso un'immagine di anteprima qui sotto in modo da poter avere un'idea di ciò che sto costruendo.

Anche io sono aperto a provare una soluzione CSS3, ma non ne ho trovato uno che funzioni meglio di jQuery finora.

jquery clock preview

fonte

2012-04-17 Jake

possibile duplicato di [JavaScript Flip Counter] (http://stackoverflow.com/questions/746353/javascript-flip-counter) – Widor

Prova questo plug-in: http://www.littlewebthings.com/projects/countdown/example/ –

@Wighor si ho trovato questo e anche un ottimo esempio [qui] (http://cnanney.com/journal/demo/apple-counter-revisited/). tuttavia stanno usando un gran numero di immagini BG, mi piacerebbe manipolare direttamente gli elementi HTML e distorcere/contortarli usando jQuery. Potrei usare le immagini BG, suppongo - ma non sono bravo in Photoshop, quindi sono diffidente nell'usare questo metodo. – Jake

lo ammetto questa è solo metà di una risposta; mostra come usare CSS/JQuery per animare l'effetto a rotazione.

<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>

Necessita JQuery 1.5.1+, e la transformjs library, che può essere downloaded here. Fare clic su ciascun numero per farlo ruotare. Testato su Firefox 11 e Chromium 17; transform.js dovrebbe fare qualcosa che funzionerà con i vecchi browser e IE.

BTW, parlando di sfide cross-browser, avevo originariamente i tre numeri su <span> s. Funziona su Firefox, ma Chrome non li animerà! Da qui la modifica a s con float:left.

Come ho già detto, è solo una mezza soluzione, in quanto non sembra ancora una carta di credito. Penso che questo può essere fatto con un po 'di mascheramento e creando un div temporaneo in cima al numero (il div reale avrà il numero successivo, il numero precedente sarà in quel div temporaneo, in alto). Ma non riuscivo a farlo funzionare prima che finissi il tempo.

Ho ancora pensato che valesse la pena di postare; prova ad aggiungere un rotateY e ruotareZ, insieme a ruotareX nell'animazione, per alcuni effetti davvero kewl.

fonte

2012-04-19 01:36:41

Animazione di un effetto Flip-Down Rolodex con jQuery

risposta

Problemi correlati