超簡単！？たった15分でカウントダウンを作成する方法

数字はなんとなく奇数が好きなコーダー、オガワです！

最近作ったLPに、お店のオープン日までの日数をカウントダウンで表示させることがあり、どうにかサクッと作れないものか…と思っていたら、すごく簡単に作れる方法を発見しました！

今回はその方法をご紹介します！

超簡単に使えるjQueryプラグイン「Flip counter」

調べてたどり着いた超簡単な方法とは、Flip counterというjQueryのプラグインを使う方法です！

公式サイトからプラグインをDL、または下記CDNをコピペで貼り付けるだけで使うことができます。
表示させるためのコードも公式サイトからコピペができるので、自分で書く部分はほとんどありません！

<!-- CSS -->
<link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet">
<!-- js -->
<script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script>

作り方

公式サイトのDEMOページでざっくり見た目を整えた後、「CODE」ボタンを押します。
ボタンを押すと必要なHTML / CSS / jsのコードが表示されるため、それをコピぺ＆サイトに合わせて微調整をするだけでカウントダウンの完成です！！

ね、簡単でしょ？笑

実際に作ってみた

実際に作ってみたものがこちら！

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

DEMOの設定で見た目をアレンジ&表記がデフォルトでは英語なので日本語に変えてみました。
ちゃちゃっと色の指定を触っただけなので、作ったのにかかった時間は15分程度…！

フォントサイズの設定をあまり触らなければ、レスポンシブはそのままでOK！
凝った動きでもこれだけ簡単に作れると、いろんなサイトに入れてみたくなっちゃいますね✨

まとめ

jsを自分で作るのも好きですが、時間がないときはサクッと作れる方法に限りますね！
カスタマイズ性もかなり高いプラグインなので、ぜひ使ってみてください♪

関連記事はこちら

[card url=”https://note.spiqa.design/wp/typing-animation/”]

[card url=”https://note.spiqa.design/wp/javascript-book/”]

[card url=”https://note.spiqa.design/wp/book02/”]