その他

2022.11.14

超簡単!?たった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=”http://note.spiqa.design/wp/typing-animation/”]

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

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

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

  • 2021.11.12

    【コピペOK】JavaScriptとCSSでタイピングアニメーションを実装

    その他

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    その他

TAG

×