これなら簡単！数字や文字のパネルをぱたぱた回転させるフリップを実装できるスクリプト -Flip Countdown

サイト構築 -JavaScript

Post on:2020年3月25日

Flip Countdownの特徴

Flip Countdownは快適なアニメーションで動作するフリップカウンターを簡単に実装できるスクリプトです。MITライセンスで、商用プロジェクトでも無料で利用できます。

クイックフリップ

高性能フリップアニメーション、フリップカードはオーバーラップできます。値は毎秒複数回更新。
タイムスナップ

タイマーのアルゴリズムはJavaScriptのsetIntervalを自動的に修正するため、高精度の間隔精度が得られます。
サーバー同期

追加の構成要件なしで、クライアントとサーバーの時刻を自動的に同期。
Tickエンジン

Flipの背後にあるTickエンジンは、豊富なカウンターテンプレートの構築と変換構成をサポート。

対応ブラウザは、下記の通りです。

Chrome
Firefox
Edge
Opera
Safari 9+
iOS Safari 9+
Android 5+
IE 11+

Flip Countdownのデモ

Flip Countdownはさまざまなカウンターをサポートしており、デモでその動作を楽しめます。

デモ一覧

Event Countdown
イベントのカウントダウンで、完了後はメッセージ表示・リダイレクトなどカスタムロジックを実行できます。

Timed Countdown
時間のカウントダウンで、ユーザーがページに滞在した秒数をカウントダウンします。

Recurring Event
定期的なイベントへのカウントダウン。毎年、毎月、毎週、または毎日の瞬間を設定できます。

Historic Counter
過去または最近のイベントからの時間をカウントします。歴史的な事件や事柄からの時間経過、サーバーの稼働時間、ページが開かれてからの経過時間など。

Fund Raising Campaign
ファンドなどで、寄付された資金を視角化。寄付額を定期的に取得することで、ライブに更新されます。

Value Counter
一定の反復回数で特定の値だけ数値を増やします。シミュレートされた値と推測値に最適です。

Slow Reveal
宝くじ番号の表示のように、ランダムな値を回転させ、緊迫感をだしながら数字を表示します。

Animated Values
値の表示を改善します。設定された時間に渡って0から指定された値にアニメーション化します。進捗メーターにも役立ちます。

Clock
時間、分、秒を表示するフリップ時計。

Local Time
ビジターのタイムゾーンで現地時間を表示します。

Stopwatch
ポーズとリセットを備えたストップウォッチ。

Billboard
さまざまなテキストメッセージを回転表示するビルボード。

Flip Countdownの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

<head>
  ...
  <link href="/flip/flip.min.css" rel="stylesheet">
</head>
<body>
  ...
  コンテンツ
  ...
<script src="/flip/flip.min.js"></script>
</body>

<head>

...

</head>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

カウンターを配置するHTMLを用意します。下記は4桁の場合です。

<div class="tick"
     data-value="1234">
    <div data-repeat="true">
        <span data-view="flip"></span>
    </div>
</div>

<div class="tick"

data-value="1234">

</div>

Step 3: JavaScript

スクリプトを初期化し、実行します。

<script>
function setupFlip(tick) {

    // The Tick `interval` function
    // helps to quickly setup a timer
    Tick.helper.interval(function() {

        // For this demo we increase
        // the value of our ticker
        // each second
        tick.value++;

    }, 1000);

}
</script>