流れる画像

質問

http://deep-emotion.jp/index.html

のように画像が常に流れていて、カーソルで左右動かせる
しかも、スマホの場合　ケースを傾けた方向に流れるといった仕組みは
どうやって作るのでしょうか？　何かサンプルがあれば
教えてください。

回答No.1

fujillin · ベストアンサー

ご提示のサイトではjavascriptを利用しているようです。

大雑把に言えば、カルーセルタイプの画像スライダーと同じような仕組みと言えます。
使用している画像が左右つながる形にしてあるもの（例えばパノラマ撮影など）であるところが、普通の画像ビューアーとちょっと違うところ。

似たようなものに、マンション販売サイトなどで室内を上下左右に見られるものが良くありますが、こちらは3次元的になっている分複雑ですし、クイックタイムなどが使われていることが多いようですが…

通常の画像ビューアはスライドしたら一旦停止しますが、これを停止せずにスライドの速度を遅くしてautoで動き続きるものをイメージしてみると、似ているということが理解できると思います。

具体的な仕組みとしては、画像要素を直接動かしたり、要素に背景画像を設定しておいて要素を移動させたり、最近のブラウザであれば背景画像の表示位置を変えることでもアニメーションが可能です。
ごく簡単に言えば、CSSでposition:absoluteにしておいてleftの値を逐次変えていくような感じです。

画像ビューアでは矢印やボタンをクリックすることで画像がスライドしますが、これをカーソルの位置やスマホの傾きによって移動速度を変えるようにしておけば、ほぼご質問のようなものになると言えるのではないでしょうか。

お礼

fujillinさん

なるほど、参考にさせていただきます。

ありがとうございました。