JavaScript Flip Counter

ils utilisent une combinaison de CSS et JavaScript. L'animation flip est alimentée par un CSS Sprite - comme la technique.

tout d'Abord, ils ont une très grande image appelée filmstrip.png qui contient chaque État flip pour chaque nombre (0 à 9; regardez a scale-down detail et vous verrez ce que je veux dire).

puis, dans le HTML, chaque chiffre est composé de trois éléments imbriqués:

• le premier est un élément de conteneur, qui a son width et height mis aux dimensions d'un seul "État" flip, et son overflowhidden. Cet élément est positionné relativement.

• le second élément est positionné absolument (et comme le premier élément est positionné relativement, ce second élément est positionné absolument relative au premier élément).

• le troisième élément a son background-imagefilmstrip.png, et ses width et height définir les dimensions de cette image.

le JavaScript semble alors changer rapidement le top propriété du second élément, provoquant différentes parties de filmstrip.png d'être exposés les uns après les autres, ce qui entraîne une animation flip.

Steve

le voici, prêt à être implémenté dans votre propre page Web http://cnanney.com/journal/code/apple-style-counter-revisited/

j'ai fait un compteur qui fonctionne très bien avec très peu de javascript pour lui donner un peu de "cerveau":

http://codepen.io/vsync/pen/dlwgj

JADE:

.numCounter(data-value='1839471')
  b
  span ,
  b
  b
  b
  span ,
  b
  b
  b

SCSS:

$digitHeight : 70px;
$speed       : .4s;

.numCounter{ 
  display:inline-block; 
  height:$digitHeight; 
  line-height:$digitHeight; 
  color:#F1F1F1; 
  text-shadow:0 0 2px #fff;
  font-weight:bold; 
  white-space:normal;
  font-size:$digitHeight/1.5;
  > b{
    display:inline-block; 
    width:$digitHeight/1.4; 
    height:100%; 
    margin:0 0.1em;
    border-radius:8px;
    background:#191919; 
    text-align:center;
    box-shadow:1px 1px rgba(white,.05), 1px 1px 5px #111 inset; 
    overflow:hidden;
    &:before{ 
        content:' 0 1 2 3 4 5 6 7 8 9 '; 
        display:block; 
        word-break:break-all;
        word-break:break-word; 
        transition:$speed cubic-bezier(.12,.78,.52,1.2); 
    }
    @for $i from 1 through 9{
        &.d#{$i}:before{ margin-top:-$digitHeight * $i; }
    }
  }
  > span{ 
    display:inline-block; 
    font-size:1.1em; 
    opacity:0.4;
    line-height:1.8; 
    padding:0; 
    vertical-align:top;
    text-shadow:none;
  }
} 

il semble grand et exécute live très bien, et il compte de n'importe quel nombre à n'importe quel nombre.

en cherchant la même chose, j'ai trouvé un produit commercial offrant cette fonctionnalité:Sprite Compte À Rebours Flip.

Note: Je ne suis pas affilié à ce produit, mais il est bien fait et pourrait être utile à quelqu'un.

je recommande la variante open source:FlipclockJS, qui probablement a été créé juste après cet événement :)

Github:objectivehtml / FlipClock