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. jQuery liMarquee
  2. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  3. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  4. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  5. jquery-base-slider
  6. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP