Hoverすると画像が拡大するJSライブラリ「magnify.js」を作ってみた

ふと、「css で transform: scale(x) したいけど、他の JS ライブラリが transform プロパティをいじっていて併用できないよー」なシチュエーションに出くわしたので、バッティングしないように同じく js で transform プロパティを丁寧にいじるコードを書きました。

そんなニッチな需要がどれくらいあるかわからないけど、興味本位で（初めて）ライブラリ化して公開してみたのでそのご紹介です。

概要

画像をはじめとして任意の要素をマウスオーバー時に拡大することができるライブラリです。

• ソースコード

• デモページ（雑ですみません）

つかいかた

<div class="magnify">
    I will be 1.5x big (the default).
</div>
<div class="magnify" data-magnify-scale="2">
    I will be 2x big.
</div>

<script src="https://cdn.jsdelivr.net/gh/SogoKato/magnify.js@main/magnify.min.js"></script>
<script>
    // Apply for each element with `magnify` class (default behavior).
    const magnify = new Magnify(".magnify");
</script>

1. CDN 経由またはファイルをダウンロード & 配置で magnify.min.js を読み込みます
2. 拡大したい要素に magnify クラスを付与します
3. 必要な場合は任意の拡大率を data-magnify-scale 属性に設定します
4. new Magnify() !

詳しい設定内容については README.md をご覧ください。

作ってみた感想

• 初めて js のライブラリを作ってみて、こういうふうに作るのね、と発見が多かった
  • 構造についてはパララックスのライブラリ Rellax を参考にさせてもらいました
• CDN 配信ってどうやるんだろうと思ったら、何も設定しなくても jsdelivr 君が GitHub から取ってきてくれた
  • ルールに従ったリンクを書くだけ！
• 現状はささっと作っただけなので拡大するとオーバーフローしちゃう場合がある
  • 細かいオプションは今後増やしていきたいかも

ご意見・ご感想がありましたら、ぜひコメントや GitHub issue に書いていただけるととても喜びます！
それでは！