Флип-счетчик JavaScript

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

Можно ли заставить JavaScript работать автономно?

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

Ответ 1

Они используют комбинацию CSS и JavaScript. Флип-анимация оснащена CSS Sprite-подобным методом.

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

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

Первый элемент контейнера, который имеет width и height, установлен в габариты одного флип-состояния, а его overflow установлен на hidden. Этот элемент позиционируется относительно.
Второй элемент позиционируется абсолютно (и поскольку первый элемент позиционируется относительно, этот второй элемент позиционируется абсолютно относительно первого элемента).
Третий элемент имеет свой background-image, установленный в filmstrip.png, а его width и height заданы размеры этого изображения.

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

Стив

Ответ 2

Здесь он готов к внедрению на вашей собственной веб-странице http://cnanney.com/journal/code/apple-style-counter-revisited/

Ответ 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;
  }
}

Он отлично выглядит и отлично работает, и он подсчитывается от любого числа до любого числа.

Ответ 4

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

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

Ответ 5

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

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