Счетчик флипов JavaScript

Question

Я бы хотел добавить на свой сайт счетчик флипов, аналогичный тому, который Apple использовала для своего 1 миллиарда отсчетов приложений .

Может кто-нибудь заставить свой JavaScript работать автономно?

Если кто-то может предоставить рабочий код, это было бы здорово.

Answer 1

Они используют комбинацию CSS и JavaScript. Отраженная анимация основана на технологии CSS Sprite .

Прежде всего, у них есть очень высокое изображение, называемое filmstrip.png, которое содержит каждое «состояние» переворота для каждого числа (от 0 до 9; посмотрите на уменьшенную деталь и посмотрим, что я имею в виду).

Затем в HTML каждая цифра состоит из трех вложенных элементов:

• Первый - это контейнерный элемент, для которого width и height установлены в размерах одного перевернутого «состояния», а overflow установлен в hidden. Этот элемент позиционируется относительно.

• Второй элемент позиционируется абсолютно (и поскольку первый элемент позиционируется относительно, этот второй элемент позиционируется абсолютно относительно относительно первого элемента).

• Для третьего элемента background-image установлено значение filmstrip.png, а для width и height установлены размеры этого изображения.

Кажется, что JavaScript быстро меняет свойство top второго элемента, заставляя различные части filmstrip.png экспонироваться одна за другой, что приводит к переворачиванию анимации.

Steve

Answer 2

Вот оно, готово для внедрения на вашей собственной веб-странице http://cnanney.com/journal/code/apple-style-counter-revisited/

Answer 3

Я сделал счетчик, который прекрасно работает с очень минимальным JavaScript, чтобы придать ему немного «мозгов»:
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;
  }
} 

Он выглядит великолепно и очень хорошо работает вживую, и он рассчитывает от любого числа до любого числа.

Answer 4

Я рекомендую вариант с открытым исходным кодом: FlipclockJS , который, вероятно, был создан сразу после этого события:)

Github: jectivehtml / FlipClock , доступно через NPM и Bower (не поддерживается)

Answer 5

При поиске того же самого, я нашел коммерческий продукт, предлагающий эту функциональность: Sprite Обратный отсчет .

Примечание: я не связан с этим продуктом; но это хорошо сделано и может быть кому-то полезно.