パララックスをやってみた。

JavaScript

巷で話題（？）のパララックスの原理・仕組みを知りたくて、フルスクラッチで書いてみた。

まぁ、実際には他のサイトのDOMの動きを見ながら、必要そうなところだけ切り出した感じです。

パララックスをやってみた。

文字について

positionをfixedにしておく。
windowのscrollイベントにて、スクロール量を取得（scrollTop）、 それに係数をかけ、leftに設定する。

画像について

文字のdivとは別に、positionがfixedなdivを用意する。
その中に、画像を複数並べておく。
今回は、下から上がってくるようにしたいので、普通に並べました。
あとは、スクロール位置（dy）によって、div要素のtopを変更する。
animateは連続で呼ぶと、ダメだったはずなので、毎回stopを呼んでます。

あと、上方向にスクロールされることも考え、そのスクロール量でどこにいて欲しいかを再設定しています。（23行目とか）

感想

  • 思った以上にめんどい。
  • このぐらいの操作で、同じような記述を何回も書くことになっているので、まじめにやるなら、ライブラリを使うor作る必要がありそう。
  • それぞれの要素のwidth, height、変更後のtopがてきとーな値を固定しているので、ウィンドウのリサイズなどで変になる可能性あり。そこらへんも、まじめにやるのはめんどくさそう。
  • 一般的に大きな画像を何枚も使うことになるので、読み込みが完了するまでは、ロード中画面とかを出しといた方がいいんだろうなー。
  • チューニングしないと、動きが気持ち悪い。。。

見つけたライブラリ