no-image

JavaScript

シンプル・軽量なアナログ時計を実装できる「jsRapClock」

jsRapClockはシンプルで軽量なアナログ時計を実装できるjQueryクロックプラグインです。秒針がカチカチと動くその様子は、とてもリアルなアナログ時計にみえます。デジタル時計よりもアナログ時計の方が見慣れている人には違和感なく受け入れられそうですね。

レスポンシブにも対応

jsRapClock

デモでは2つのアナログ時計が設置されています。左側には現在時刻が、右側にはロンドンの時刻が表示されています。シンプルな時計のデザインでとてもみやすいですね。カチカチと時を刻む秒針まで描かれているところがとてもリアルで素敵です。自サイトにアナログ的な要素を取り入れたい場合にはピッタリのプラグインになるのではないでしょうか?

また、レスポンシブに対応しているところもうれしいですね。デモの画面の横幅を縮小していくとわかりますが、右側のロンドン時刻を表示する時計のサイズが画面に合わせて可変します。スマホやタブレットなどいろんなデバイスから最適なサイズで時計を表示できるのがグッドです。

オプションには、caption、shiftH、shiftMという項目が用意されています。ちなみにロンドン時刻側の時計に書かれている「London」という文字は、オプションのcaptionから任意の文字を設定できます。

というわけで、シンプル・軽量でレスポンシブにも対応したアナログ時計を実装できる「jsRapClock」の紹介でした。

no-imageダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」前のページ

セクション間をスムーズにスクロールできる「Scroll Control」次のページno-image

関連記事

  1. pixelate.js
  2. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  3. DD Scroll Boxes
  4. ScrollPress

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

  5. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

  6. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP