ちょっと前に流行ったパララックスの復習。
スクロールに応じて個々のオブジェクトに動きをつける事は簡単で、スクロール量に応じてデタラメな変数をかけてオブジェクトを動かしても、それなりに視差が生まれればそれっぽく見える。
|
1 2 3 4 |
var value = $(window).scrollTop(); $objetct.css({ marginTop:value*0.2 }); |
しかし、
スクロールして親要素が画面から消えるタイミングで、子要素の頭が次の要素に隠れるという動作がしたい場合は、親要素の高さと子要素の高さ、オフセットなどから計算しなくてはならない。
文章で説明してもパッとこないと思うので次の図を見てもらいたい。
黒ぶちがブラウザのウィンドウで黄色と青のブロックに別れているwebサイトがあるとする。
普通にスクロールすると子要素の白は、白の下までスクロールしたら見えなくなる（あたりまえだけど笑）
ではつぎに、スクロールし親要素がいなくなるタイミングで子要素もいなくなるように、
子要素に動きをつける。
最初の図と見比べてみると分かるけど、スクロールは下に動いていっているが、子要素白の位置はほとんど動いていない。黄色は上に上がっている。
黒枠（ブラウザウィンドウ）が下に動くと考えるよりも黄と青のブロックのWebサイトが上に上がっていると考える。そうすると子要素白はほとんど動いていない。
このロジックをどうやって組むかというと、
親要素の黄がスクロールでAの距離動いている間に、（スクロールで上に上がっていく）
子要素の白はB+Cの距離を動けば、（スクロール量に応じて下に動かす）
子要素の白はCの距離を動けば、（スクロール量に応じて下に動かす）※2014/12/14 修正
スクロールし親要素の尻がブラウザの一番上にきて消えるタイミングで、
子要素の頭が次の要素に隠れていくという動作になる。
See the Pen Example of parallax by yoshizumi ashikawa (@gollowars) on CodePen.
といっても難しくはなく算数レベルなのだけども。。
Webで何かを表現する人間としては、公式としてすぐに頭に浮かぶようになっておきたいものである。
このような簡単だけれど素人にはパッと思い浮かばないモーションの仕組みは、
やれプログラミングの今の時代でも、なぜそうなるのかという数学的な説明があまりされていない気がする。
ソースコードは至る所に落ちていても、数学的な説明みたいなのはなかなかWeb上にない。
自分のような凡人はこういう公式みたいなのを頭にどんどん入れて使っていくようにしていかなくてはならん。
また備忘録として書いていけたらと思う。