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

カウントダウン、カウンター、タイマー、メッセージなど、数字や文字のパネルをぱたぱた回転させるフリップを簡単に実装できるスクリプトを紹介します。

ぱたぱた回転するアニメーションが非常に気持ちよく、今まで紹介した中でもピカイチだと思います。

Flip Countdownのデモ

Flip Countdown
Flip Countdown -GitHub

Flip Countdownの特徴

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

Flip Countdownのデモ
  • クイックフリップ
    高性能フリップアニメーション、フリップカードはオーバーラップできます。値は毎秒複数回更新。
  • タイムスナップ
    タイマーのアルゴリズムは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: 外部ファイル

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

Step 2: HTML

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

Step 3: JavaScript

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

詳しい使い方は、ドキュメントが用意されています。

デモのキャプチャ

Flip Countdown

フローチャートのように解説されているのは、面白いですね。

デモのキャプチャ

Flip Countdown

sponsors

top of page

©2020 coliss