超簡単!?たった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を自分で作るのも好きですが、時間がないときはサクッと作れる方法に限りますね!
カスタマイズ性もかなり高いプラグインなので、ぜひ使ってみてください♪

関連記事はこちら

この記事をシェアする

関連記事

  • 2022.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    CSS

    HTML5

    コーディング

    制作

  • 2022.11.15

    Wordpressで多言語対応をする方法

    コーディング

    制作

  • 2022.09.15

    【初心者向け】アクセス解析の用語をまとめて解説!

    制作

    ディレクション

おすすめ記事

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

  • 2022.06.09

    この世界はコードでできている#1

    コーディング

    制作

×