Animowanie efektu przewijania Rolodex za pomocą jQuery

Zbudowałem więc bardzo małe demo starego zegara w stylu rolodeksu. Grafika pochodzi z darmowego PSD i zbudowałem funkcję zegara za pomocą setInterval(). Możesz sprawdzić the live demo here.Animowanie efektu przewijania Rolodex za pomocą jQuery

Staram się ożywić zmianę liczb tak, aby górna część "przewróciła się", aby wyświetlić nowy numer. Jestem zdecydowanie zagubiony co do tego, w jaki sposób powinienem to zrobić - mogłem używać obrazów bg, ale uważam, że liczby w prostym HTML są bardziej przyjazne dla użytkownika. Czy ktoś może wskazać mi właściwy kierunek? Bardzo bym chciała uzyskać pomoc ... Dodałem także obraz podglądu poniżej, abyś mógł zorientować się, co buduję.

Jestem także otwarty na wypróbowanie rozwiązania CSS3, ale nie znalazłem takiego, który działa lepiej niż jQuery.

jquery clock preview

Źródło

2012-04-17 Jake

możliwy duplikat [JavaScript Flip Counter] (http://stackoverflow.com/questions/746353/javascript-flip-counter) – Widor

Wypróbuj tę wtyczkę: http://www.littlewebthings.com/projects/countdown/example/ –

@Widor tak Znalazłem to, a także świetny przykład [tutaj] (http://cnanney.com/journal/demo/apple-counter-revisited/). jednak używają całego mnóstwa obrazów BG, chciałbym manipulować elementami HTML bezpośrednio i przekręcić/wykrzywić je za pomocą jQuery. Mógłbym użyć obrazów BG, jak przypuszczam - ale nie jestem świetny w Photoshopie, więc nie chcę używać tej metody. – Jake

Muszę przyznać, to tylko pół odpowiedź; pokazuje, jak używać CSS/JQuery do animowania efektu toczenia.

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

Trzeba JQuery 1.5.1+ i transformjs library, które mogą być downloaded here. Kliknij każdy numer, aby go obrócić. Testowane w Firefox 11 i Chromium 17; transform.js powinien zrobić coś, co zadziała w starszych przeglądarkach i IE.

BTW, mówiąc o wyzwaniach związanych z różnymi przeglądarkami, początkowo miałem trzy numery na <span> s. Działa to w przeglądarce Firefox, ale Chrome ich nie ożywi! Stąd zmiana na <div> s z float:left.

Tak jak powiedziałem, jest to tylko pół rozwiązanie, ponieważ nie wygląda jeszcze jak karta typu flip. Myślę, że można to zrobić z odrobiną maskowania i tworzeniem tymczasowego div na szczycie liczby (rzeczywisty div będzie miał następną liczbę, poprzednia liczba będzie w tym tymczasowym div, na górze). Ale nie mogłem tego zrobić, zanim zabrakło mi czasu.

Nadal uważam, że warto było jednak opublikować; spróbuj dodać rotateY i rotateZ wraz z rotateX w animacji, aby uzyskać naprawdę efekt kewl.

Źródło

2012-04-19 01:36:41

Animowanie efektu przewijania Rolodex za pomocą jQuery

Odpowiedz

Powiązane problemy