[JS]画像の商品をドラッグとホイールで360度回転させるスクリプト -Reel

img要素で配置した画像をマウスのドラッグとホイール操作で、商品や風景をぐるっと360度回転させるスクリプトをPetr Vostřelから紹介します。

デモのキャプチャ

Reel
デモ

画像の回転はドラッグとホイールに合わせて、左右どちらでも回転が可能です。

スクリプトのイメージ

画像はimg要素で配置されており、二枚の画像を使用します。

一枚目は、スタティックに配置されているデフォルトの画像です。

画像のキャプチャ

デフォルトの画像

二枚目は、回転に必要な画像です。
車がぐるっと回転するのには、下記のような画像を作成します。

画像のキャプチャ

回転に必要な画像(キャプチャは縮小)

パノラマにも対応しており、下記のような画像を用意すると設置できます。

画像のキャプチャ

パノラマ用の画像(キャプチャは縮小)

ReelはjQueryのプラグインのため、実装にはjquery.jsが必要です。

sponsors

top of page

©2018 coliss