MediumLightbox

JavaScript

Mediumライクな画像ズームを実装できる「MediumLightbox」

シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「MediumLightbox」をご紹介します。Mediumライクな美しいズーム機能を取り入れたい方は必見です。必要最小限のアニメーションで、長文記事との相性はバツグンだと思います。

MediumLightbox

デモ

文章内に埋め込まれた画像をクリックすると、アニメーションとともに画像がズーミングします。オーバーレイつきなので、文章が非表示になり画像に集中できるのがいいですね。拡大された画像を再度クリックすると、元の状態にもどります。

「さっと拡大してさっともどせる」。このシンプルな動作が、可読性を損なわずに長文を読み進められるポイントになるのではないでしょうか。

使い方もカンタンで、手軽に実装できるのがうれしいですね。

imgタグ内には、data-width、data-heightといった属性を指定できます。また、オプションではmarginを設定することも可能です。marginのデフォルト値は20になります。

MediumLightbox

mFancyTitleブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」前のページ

パスワードの安全性を教えてくれる「hsimp」次のページhsimp

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

  2. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  3. Animate Transition
  4. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  5. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  6. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP