MediumLightbox

JavaScript

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

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

MediumLightbox

デモ

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

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

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

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

MediumLightbox

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

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

関連記事

  1. Smooth Scroll behavior polyfill
  2. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  3. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン19選のまとめ 2012/04 – 2012/0…

    2012年4月〜2012月7月までの当ブログで紹介したjQueryプラ…

  4. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  5. no-image
  6. ClickSpark.js

    JavaScript

    美しいパーティクルエフェクトを実装できる「ClickSpark.js」

    ClickSpark.jsは画像を用いたたくさんの粒子が放出されるよう…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP