Turntable.js

JavaScript

画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

Turntable.jsは複数の画像を使ってストップモーション動画のような効果を実装することができるjQueryプラグインです。マウスを動かすことで操作できます。レスポンシブにも対応しているのがいいですね。

Turntable.js

デモ

デモのようにプロダクトを360°から見せたいときなんかに活用できますね。ほかにもアイディア次第でさまざまなシーンに応用できそうなプラグインです。

画像はliタグ内に記述するdata-img-srcという属性に指定していきます。jQueryプラグインでスライダーを実装するような感覚で使えるのがいいですね。

セッティングに関しても特に難しいことなく実装できるので、気軽に導入できるのではないでしょうか。

使用する画像にもよりますが、容量が重くなってしまいがちな動画よりも読み込みスピードは速そうな感じですね。

また、自動再生とかではなくユーザーの意思で動かすことができるのも魅力の一つかと思います。

そんなわけで、画像を並べてストップモーション的なアニメーションを実装したい人は是非チェックしてみてください。

Turntable.js

ドウシシャのデスクタワーファン「FTR-301」場所とらずのデスクタイプ!ドウシシャのデスクタワーファン「FTR-301」前のページ

フルスクリーンメニューを表示させるハンバーガーアイコン「Hamburger Icon Menu」次のページHamburger Icon Menu

最近の記事

  1. クリスマスエスプレッソロースト
  2. シーザーチキン 石窯カンパーニュ
  3. スキャルプ&ヘア リファイニング トリートメント オイル R
  4. ポーレックスの手動ミル
  5. クリスマスブロンドロースト
PAGE TOP