{{catName}} {{title}}

{{author}}| #{{t.title}}

以前の案件で、PCブラウザのマウスホイールに合わせて、画像が動画のように動く機能というものを作成しました。
まずはこちらをご覧ください。
サンプル動画(別ウインドウが開きます)

動画?

実は全てJPEG形式の画像です。
動画から1コマずつ書き出したものを連続で表示しています。
ペンギンの動画は全部で293枚の画像を使用しています。

実際にどのような仕組みかといいますと。
まず、Javascripでマウスホイールの動きを監視します。
マウスホイールを動かす毎に、表示されている画像を入れ替えています。
画像は1~293までの連番がファイル名になっているので、マウスホイールを動かした分だけ、画像の番号を順番に画像を入れ替えます。
マウスホイールを逆に動かすと、ファイル番号も逆向きに進みます。

こんなところで使っています

この機能は株式会社 自然農園 様のSERVICEページで使用されています。
デジタルマーケティング | 株式会社自然農園

実際の案件では、今回紹介した機能の他に、いろいろと効果を組み込んでいるので、視覚的に面白い作りになっているかと思います。
左のメニューをクリックすることで早送りや早戻しも可能になっています。
残念ながら今回はマウスホイールでの操作となるので、PCのみの機能となりますが、機会があればスマートフォンにも対応するようにしてみたいです。

 

SHARE TWEET
{{category}} OLDER
{{category}} NEWER
TOP