Countdown Timer Ultimateで、アニメーション付きのカウントダウンを実装

カウントダウンにアニメーションがついていると目がつきますね。今回は、Countdown Timer Ultimateで、アニメーション付きのカウントダウンを実装する方法を紹介します。

今回のDEMOも、Jazz Concertのカウントダウンです。

モノクロのカウントダウンにしました。

設定

サイドメニューのCountdown Timer＞Add Timerをクリックします。設定画面が表示されます。

まず、タイトルを追加にタイトルを入力します。Expiry Date & Timeにイベントの日時をカレンダーから設定します。Timer Labelに表示したいタイマーにチェックを入れます。

Clock Background Colors Settingsで、タイマーの色を設定します。Background Colorで、タイマーの背景色を黒に設定します。Foreground Colorで、それぞれのタイマーの色をグレーに設定します。

右サイドバーの公開ボタンをクリックして保存します。

設置

How to Useのショートコードをコピーします。編集画面を開き、ショートコードブロックを挿入し、ペーストします。これで設置完了です。

プレビューで確認します。イベント時間が経過したらタイマーが非表示になります。

以上で今回の説明は終了です。カラーが、デザインに合わせて変更できるのがいいですね。