Lightense Images

JavaScript

軽量で依存しないピュアJavaScriptライブラリによるズーミング実装「Lightense Images」

Lightense ImagesはjQueryなどに依存することなく実装できるズーミングライブラリです。ピュアJavaScriptで容量も軽量なところがいいですね。2KB(gzip圧縮)未満とのことで、軽くてサクサク動作する画像ズーム機能を実装したい人にオススメです。

背景カスタマイズなども可能

デモ

上記のページにはいくつかのデモが用意されています。画像にカーソルをあわせるとアイコンが矢印から虫眼鏡に変わるので、「拡大できるんだな」とすぐに理解できます。画像をクリックすると、ズーミングします。

背景にオーバーレイをかけたり、設定で背景をうっすら透過させたりすることも可能です。背景の不透明度は好きな数値に指定できるので、好みにあわせたカスタマイズが可能です。

具体的には、画像タグ内に「data-background」属性を追加し、rgbaの各数値を設定することで背景をカスタマイズできます。不透明度だけではなく、背景カラーなども変えれるのがいいですね。

実装方法もカンタンなので、手軽に自サイトにズーミング機能を取り入れたいときにはピッタリのライブラリといえます。

豊富な機能やオプションなどはいらないから、シンプルで軽量な画像ズーム機能を実装したいという人にオススメしたいですね。

Lightense Images

kissui.scrollanimスクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」前のページ

viewportから離れた時にイベントをトリガーしてくれる「gliojs」次のページgliojs

関連記事

  1. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

  2. Modaal

    JavaScript

    アクセシビリティに優れたモーダルウィンドウを実装できる「Modaal」

    ModaalはWCAG 2.0のレベルAAをサポートしているアクセシビ…

  3. HC Sticky

    JavaScript

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

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

  4. Letter Effects and Interaction Ideas
  5. bcralnit.js
  6. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP