ふと、「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>

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

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

作ってみた感想

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

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