2020.10.15  2021.04.04

jQueryプラグイン、spritespinを使って3D回転画像を実装する方法

皆さんこんにちは!マコブログです!

今回は、jQueryプラグイン「spritespin」を使って、3D回転する画像を構築する方法を紹介したいと思います。

こういうのができます↓↓↓↓↓
スプリットスピンの見本

それでは!実際に構築してみましょう!


実際にプログラムを書く

まず、下準備としてjQueryを読み込んでください。←これ抜かすと動きません…。

そして、jQueryを読み込んだ場所よりも後に、今回のspritespinを読み込みます。

今回はCDNを使用してspritespinを読み込んでみたいと思います。

↓↓↓↓ここでspritespinと検索してscriptタグをコピーしてください。
CDNで読み込む

コピーが完了したら、footerで先ほどコピーしたscriptタグを読み込んでください。

※尚、今回使用したspritespinのバージョンは最新の3.4.3です。

jQueryとspritespinの読み込みが完了しましたら、下記記述をしてください。

$('ID名').spritespin({
animate: false, //クリック操作でのみアニメーション。trueで自動回転する
loop: true, //自動回転または回転をループするか
width: 550, //HTML上での幅
height: 450, //HTML上での高さ
frames: 2, //フレーム数は読み込む画像の枚数を指定
/* global tUrl */ //今回はtUrlという変数に、WordPressのテーマフォルダまでのパスが格納されています。
source: [  //以前のバージョンはimageというオプション名でしたが、今回はsourceというオプションです。
tUrl + 'img/sprit/360_1.png', //画像が格納されているパスを記述してください。
tUrl + 'img/sprit/360_2.png'
] 
})

これで実装は完了です!



具体的な解説をすると、最初にID名とありますが、これはHTML上で表示したい場所にからのdivタグなどにID属性を指定して、JavaScript側で表示させるためのものです。

また、HTML上での幅と高さとありますが、PC表示とSP表示が同じ大きさでは困ってしまいますよね。

そういった方は、変数を使用して、画面が読み込まれたときの画面幅を取得して、条件分岐と変数への値の代入を利用してレスポンシブさせてください。

JavaScriptで画面幅に応じて変数の中身を変化させる方法は、追って次回の記事などで紹介したいと思います。

sourceで指定した画像ですが、これは回転している画像を一枚一枚読み込んで表示させるためのものなので、あらかじめ被写体を回転させた画像を用意してください。

実際に試してみましたが、一周で30枚ほどの写真でうまく回転しているように見えました!

まとめ

いかがでしたでしょうか?

今回は、jQueryプラグイン、「spritespin」を使用して3D画像回転を実装しました。

写真の用意が面倒ですが、実装すれば注目を集めること間違いなしです!

今回の記事が少しでもWEB制作のお役に立てればと思います。

こちらの記事も是非チェックしてみてください↓
MW WP FORMでURL引数のフィルターフックを使う方法

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →