【JavaScript】Amazon風、ホバーしたら画像を拡大表示するライブラリ「Drift.js」

2025年02月17日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はWEBサイトにて商品紹介をする際に便利なtipsを紹介します。

実装例

ここにディテールを表示

HTML例

まず下記コードを＜head＞内に記述してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/drift-zoom/dist/drift-basic.min.css">

そうしたら下記コードを＜script＞タグの前に記述してください。

<script src="https://cdn.jsdelivr.net/npm/drift-zoom/dist/Drift.min.js"></script>

これでCDNの記述は完了です。

<div class="zoom-area">
  <img id="zoom-target" src="./house-8337847_1280.png" data-zoom="./house-8337847_1280.png">
  <div id="js-zoom">
    <h3>ここにディテールを表示</h3>
  </div>
</div>

CSS例

.zoom-area{
  border-radius:8px;
  padding:20px;
  display: flex;
}
#zoom-target {
  display: inline-block;
  width: 30%;
  cursor:zoom-in;
}
#js-zoom {
  position: relative;
  width: 65%;
  margin-left: 5%;
  border: 1px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript例

const demoTrigger = document.querySelector('#zoom-target');
const paneContainer = document.querySelector('#js-zoom');
new Drift(demoTrigger, {
  paneContainer: paneContainer,
  inlinePane: false,
  hoverBoundingBox: true
});