no-image

JavaScript

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

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

レスポンシブにも対応

jsRapClock

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

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

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

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

関連記事

  1. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

  2. Vimeo Carousel Gallery
  3. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  4. no-image
  5. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  6. no-image

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP