Turntable.js

JavaScript

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

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

Turntable.js

デモ

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

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

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

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

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

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

Turntable.js

関連記事

  1. jquery.confirmDialog
  2. no-image

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  3. Text Effects

    JavaScript

    テキストがカシャカシャ切り替わって表示するjQueryプラグイン「Text Effects」

    Text EffectsというjQueryプラグインを使えば、テキスト…

  4. Letter Effects and Interaction Ideas
  5. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  6. Multi-Step-Form-Js

最近の記事

  1. Anker アルカリ乾電池
  2. スタンスミス(EDIFICE/IENA別注)
  3. WI-1000XM2
  4. mill オイルヒーター

アーカイブ

PAGE TOP