Turntable.jsは複数の画像を使ってストップモーション動画のような効果を実装することができるjQueryプラグインです。マウスを動かすことで操作できます。レスポンシブにも対応しているのがいいですね。
Turntable.js
以下のページからTurntable.jsのデモ動作を確認できます。
デモのようにプロダクトを360°から見せたいときなんかに活用できますね。ほかにもアイディア次第でさまざまなシーンに応用できそうなプラグインです。
画像はliタグ内に記述するdata-img-srcという属性に指定していきます。jQueryプラグインでスライダーを実装するような感覚で使えるのがいいですね。
セッティングに関しても特に難しいことなく実装できるので、気軽に導入できるのではないでしょうか。
使用する画像にもよりますが、容量が重くなってしまいがちな動画よりも読み込みスピードは速そうな感じですね。
また、自動再生とかではなくユーザーの意思で動かすことができるのも魅力の一つかと思います。
そんなわけで、画像を並べてストップモーション的なアニメーションを実装したい人は是非チェックしてみてください。
Turntable.jsの使い方やダウンロードなどの詳細は以下からどうぞ。
