以前の案件で、PCブラウザのマウスホイールに合わせて、画像が動画のように動く機能というものを作成しました。
まずはこちらをご覧ください。
サンプル動画（別ウインドウが開きます）
動画？
実は全てJPEG形式の画像です。
動画から1コマずつ書き出したものを連続で表示しています。
ペンギンの動画は全部で293枚の画像を使用しています。
実際にどのような仕組みかといいますと。
まず、Javascripでマウスホイールの動きを監視します。
マウスホイールを動かす毎に、表示されている画像を入れ替えています。
画像は1～293までの連番がファイル名になっているので、マウスホイールを動かした分だけ、画像の番号を順番に画像を入れ替えます。
マウスホイールを逆に動かすと、ファイル番号も逆向きに進みます。
こんなところで使っています
この機能は株式会社 自然農園 様のSERVICEページで使用されています。
デジタルマーケティング | 株式会社自然農園
実際の案件では、今回紹介した機能の他に、いろいろと効果を組み込んでいるので、視覚的に面白い作りになっているかと思います。
左のメニューをクリックすることで早送りや早戻しも可能になっています。
残念ながら今回はマウスホイールでの操作となるので、PCのみの機能となりますが、機会があればスマートフォンにも対応するようにしてみたいです。
OLDER
