シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「MediumLightbox」をご紹介します。Mediumライクな美しいズーム機能を取り入れたい方は必見です。必要最小限のアニメーションで、長文記事との相性はバツグンだと思います。
MediumLightbox
以下、MediumLightboxの実際のデモになります。
文章内に埋め込まれた画像をクリックすると、アニメーションとともに画像がズーミングします。オーバーレイつきなので、文章が非表示になり画像に集中できるのがいいですね。拡大された画像を再度クリックすると、元の状態にもどります。
「さっと拡大してさっともどせる」。このシンプルな動作が、可読性を損なわずに長文を読み進められるポイントになるのではないでしょうか。
使い方もカンタンで、手軽に実装できるのがうれしいですね。
imgタグ内には、data-width、data-heightといった属性を指定できます。また、オプションではmarginを設定することも可能です。marginのデフォルト値は20になります。
シンプルなコードで美しいズーム機能を実装できるMediumLightbox。テキストベースのwebページへ、画像を自然に溶け込ませたいときに活用されてみてはいかがでしょうか？
