Turntable.js

JavaScript

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

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

Turntable.js

デモ

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

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

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

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

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

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

Turntable.js

関連記事

  1. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  2. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  3. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

  4. JavaScript

    レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

    Slider Proはレスポンシブやタッチ・スワイプに対応したスライダ…

  5. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

  6. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

最近の記事

  1. M360bt

アーカイブ

PAGE TOP