Driftを利用してみた

Driftは画像にマウスホバーした際、画像を拡大するライブラリです。Amazonなどの商品を拡大する動作を再現でき、jQueryなどの軽量でライブラリに依存せずに単独で動作するので、気軽に導入できます。ここではDriftについて解説していきます。

01: インストール

bash


# 作業ディレクトの作成/移動
$ mkdir JS0502-Drift
$ cd JS0502-Drift

# Driftをダウンロード
$ git clone https://github.com/imgix/drift

# サンプルコードを作成する。
$ nano index.html

index.html


<html><head>
  <link rel="stylesheet" href="drift/dist/drift-basic.min" />
    <script src="drift/dist/Drift.min.js"></script>
</head>
<body>
  <img src="image.png" width="260px" height="480px" data-zoom="image.png">
  <p>This is a simple picture.</p>
  <script>
    new Drift(document.querySelector('img'), {
      paneContainer: document.querySelector('p')
    });
  </script>
</body>

02: 動作テスト

ブラウザで作成したindex.htmlにアクセスして「data-zoom」で指定した画像にマウスホバーすることで拡大表示される。