全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
スクリプトで作るシンプルなカウント
2023.01.15
※この記事は2023年01月15日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
今回は、ECサイトのタイムセールや、数値を強調するサイトなどで使える、動きのあるカウントの作り方を紹介します。
【目次】
- 1. ターゲット日時までの時間をカウントする
- 2. 数値をカウントする
ターゲット日時までの時間をカウントする
ターゲット日時までのカウントダウンタイマーを作ります。
例として、ターゲット日時を『2100年1月1日 00時00分00秒』とします。
Javascript記述内、new Dateの引数は下記のように記述します。
new Date(“2100/01/01 00:00:00“)
数値をカウントする
例として、500000を基準に、数値のカウントアップ、カウントダウンをさせます。
『jQuery』と『jquery.inview』というライブラリを使います。
このデモは、スクロールによって、要素が表示されたタイミングで動きを発動させます。
まとめ
カウントの設置は、動きを付けることによって時間や数値を視覚的に伝えることができます。
見せ方を工夫したいときに利用してみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
こんにちは。コーダーの兼山です。 背景固定を『background-attachment: fixed;』で指定した際、…
