javascript - JavaScript フリップ カウンター

Question

Apple が10 億個のアプリのカウントダウンに使用していたものと同様に、自分のサイトにフリップ カウンターを追加したいと考えています。

JavaScript をスタンドアロンで動作させることはできますか?

誰かが動作するコードを提供できれば、それは素晴らしいことです。

Answer 1

CSS と JavaScript を組み合わせて使用​​しています。フリップ アニメーションは、CSS スプライトのような手法によって強化されています。

まず第一に、各数字 (0 から 9;縮小された詳細を見てください。意味がわかります)filmstrip.pngごとにすべてのフリップの「状態」を含む非常に背の高い画像が呼び出されます。

次に、HTML では、各数字は 3 つのネストされた要素で構成されます。

• 1 つ目はコンテナ要素で、 と が単一のフリップ「状態」の次元に設定され、 が にwidth設定されます。この要素は相対的に配置されます。heightoverflowhidden

• 2 番目の要素は絶対的に配置されます (また、最初の要素が相対的に配置されるため、この 2 番目の要素は最初の要素に対して絶対的に配置されます)。

• 3 番目の要素は にbackground-image設定されfilmstrip.png、 とwidthはheightこの画像の寸法に設定されています。

次に、JavaScripttopは 2 番目の要素のプロパティを急速に変更するように見え、さまざまな部分がfilmstrip.png次々に公開され、フリップ アニメーションが発生します。

スティーブ

Answer 2

これで、独自の Web ページhttp://cnanney.com/journal/code/apple-style-counter-revisited/に実装する準備が整いました。

Answer 3

少し「頭脳」を与えるために、非常に最小限のJavaScriptでうまく機能するカウンターを作成しました。

function Counter(selector, settings){
  this.settings = Object.assign({
    digits: 5,
    delay: 250, // ms
    direction: ''  // ltr is default
  }, settings||{})
  
  var scopeElm = document.querySelector(selector)
  
  // generate digits markup
  var digitsHTML = Array(this.settings.digits + 1).join('<div><b data-value="0"></b></div>')
  scopeElm.innerHTML = digitsHTML;

  this.DOM = {
    scope : scopeElm,
    digits : scopeElm.querySelectorAll('b')
  }
  
  this.DOM.scope.addEventListener('transitionend', e => {
    if (e.pseudoElement === "::before" && e.propertyName == 'margin-top'){
      e.target.classList.remove('blur')
    }
  })
  
  this.count()
}

Counter.prototype.count = function(newVal){
  var countTo, className, 
      settings = this.settings,
      digitsElms = this.DOM.digits;
  
  // update instance's value
  this.value = newVal || this.DOM.scope.dataset.value|0

  if( !this.value ) return;
  
  // convert value into an array of numbers
  countTo = (this.value+'').split('')
  
  if(settings.direction == 'rtl'){
    countTo = countTo.reverse()
    digitsElms = [].slice.call(digitsElms).reverse()
  }
  
  // loop on each number element and change it
  digitsElms.forEach(function(item, i){ 
      if( +item.dataset.value != countTo[i]  &&  countTo[i] >= 0 )
        setTimeout(function(j){
            var diff = Math.abs(countTo[j] - +item.dataset.value);
            item.dataset.value = countTo[j]
            if( diff > 3 )
              item.className = 'blur';
        }, i * settings.delay, i)
  })
}



/////////////// create new counter for this demo ///////////////////////

var counter = new Counter('.numCounter', {direction:'rtl', delay:200, digits:7})
setInterval(randomCount, 3000)

function randomCount(){
  counter.count( getRandomNum(0, 9999999))
}

function getRandomNum(min,max){
    return Math.floor(Math.random()*(max-min+1) + min)
}

.numCounter {
  display: inline-block;
  height: 90px;
  line-height: 90px;
  text-shadow: 0 0 2px #fff;
  font-weight: bold;
  white-space: normal;
  font-size: 50px;
}

.numCounter > div {
  display: inline-block;
  vertical-align: top;
  height: 100%;
}

.numCounter > div > b {
  display: inline-block;
  width: 40px;
  height: 100%;
  margin: 0 0.1em;
  border-radius: 8px;
  text-align: center;
  background: white;
  overflow: hidden;
}

.numCounter > div > b::before {
  content: ' 0 1 2 3 4 5 6 7 8 9 ';
  display: block;
  word-break: break-all;
  -webkit-transition: 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15), text-shadow 150ms;
  transition: 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15), text-shadow 150ms;
}

.numCounter > div > b.blur {
  text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.2), 
               0 0.1em 2px rgba(255, 255, 255, 0.6), 
               0 0.3em 3px rgba(255, 255, 255, 0.3), 
               0 -0.1em 2px rgba(255, 255, 255, 0.6), 
               0 -0.3em 3px rgba(255, 255, 255, 0.3);
}

.numCounter > div > b[data-value="1"]::before { margin-top: -90px; }
.numCounter > div > b[data-value="2"]::before { margin-top: -180px;}
.numCounter > div > b[data-value="3"]::before { margin-top: -270px;}
.numCounter > div > b[data-value="4"]::before { margin-top: -360px;}
.numCounter > div > b[data-value="5"]::before { margin-top: -450px;}
.numCounter > div > b[data-value="6"]::before { margin-top: -540px;}
.numCounter > div > b[data-value="7"]::before { margin-top: -630px;}
.numCounter > div > b[data-value="8"]::before { margin-top: -720px;}
.numCounter > div > b[data-value="9"]::before { margin-top: -810px;}

.numCounter > div:nth-last-child(3n)::before {
  content: ",";
  display: inline;
  font-size: 1.1em;
  opacity: .6;
  color: white;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
}

.numCounter {
  overflow: hidden;
  padding: .4em;
  text-align: center;
 
  border-radius: 16px;
  background: black;
}
.numCounter b {
  color: black;
}

<div class='numCounter' data-value='1839471'></div>

見栄えもよく、ライブパフォーマンスも非常に優れており、何から何まで数えられます。

Answer 4

同じものを探しているときに、この機能を提供する商用製品を見つけました: Sprite Countdown Flip。

注: 私はこの製品と提携していません。しかし、それはよくできていて、誰かに役立つかもしれません.