Turntable.js

JavaScript

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

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

Turntable.js

デモ

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

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

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

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

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

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

Turntable.js

関連記事

  1. Macy.js

    JavaScript

    軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」

    Macy.jsは軽量なグリッドレイアウトを実装することができる便利なJ…

  2. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  3. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  4. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  5. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  6. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

最近の記事

  1. トライポッドスリーブ
  2. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  3. カメラマングローブ Grip Hot Shot III
  4. 包(つつむ)巾着ポーチ

Instagram始めました

Facebookページ

PAGE TOP