no-image

JavaScript

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

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

レスポンシブにも対応

jsRapClock

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

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

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

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

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

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

関連記事

  1. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  2. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  3. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

  4. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

  5. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  6. jquery.peekABar

    JavaScript

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP