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

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

enter image description here

Можно ли заставить 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 экспонируются один за другим, что приводит к анимации с переворотом.

Стив

Ответ 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 (не поддерживается)