Example of parallax

ちょっと前に流行ったパララックスの復習。
スクロールに応じて個々のオブジェクトに動きをつける事は簡単で、スクロール量に応じてデタラメな変数をかけてオブジェクトを動かしても、それなりに視差が生まれればそれっぽく見える。

しかし、
スクロールして親要素が画面から消えるタイミングで、子要素の頭が次の要素に隠れるという動作がしたい場合は、親要素の高さと子要素の高さ、オフセットなどから計算しなくてはならない。
文章で説明してもパッとこないと思うので次の図を見てもらいたい。

黒ぶちがブラウザのウィンドウで黄色と青のブロックに別れているwebサイトがあるとする。
普通にスクロールすると子要素の白は、白の下までスクロールしたら見えなくなる(あたりまえだけど笑)

parallax2
parallax2

ではつぎに、スクロールし親要素がいなくなるタイミングで子要素もいなくなるように、
子要素に動きをつける。

parallax3
parallax3

最初の図と見比べてみると分かるけど、スクロールは下に動いていっているが、子要素白の位置はほとんど動いていない。黄色は上に上がっている。
黒枠(ブラウザウィンドウ)が下に動くと考えるよりも黄と青のブロックのWebサイトが上に上がっていると考える。そうすると子要素白はほとんど動いていない。

このロジックをどうやって組むかというと、

parallax4
parallax4

親要素の黄がスクロールでAの距離動いている間に、(スクロールで上に上がっていく)
子要素の白はB+Cの距離を動けば、(スクロール量に応じて下に動かす)
子要素の白はCの距離を動けば、(スクロール量に応じて下に動かす)※2014/12/14 修正
スクロールし親要素の尻がブラウザの一番上にきて消えるタイミングで、
子要素の頭が次の要素に隠れていくという動作になる。

 

See the Pen Example of parallax by yoshizumi ashikawa (@gollowars) on CodePen.

といっても難しくはなく算数レベルなのだけども。。
Webで何かを表現する人間としては、公式としてすぐに頭に浮かぶようになっておきたいものである。
このような簡単だけれど素人にはパッと思い浮かばないモーションの仕組みは、
やれプログラミングの今の時代でも、なぜそうなるのかという数学的な説明があまりされていない気がする。
ソースコードは至る所に落ちていても、数学的な説明みたいなのはなかなかWeb上にない。
自分のような凡人はこういう公式みたいなのを頭にどんどん入れて使っていくようにしていかなくてはならん。
また備忘録として書いていけたらと思う。

Pocket

Lv.15

僕のレベルはどのくらいだろうと考えた時に、漠然とLv.15というランクが頭に浮かんだ。
初代ポケモンでLv.15というとハナダシティくらいだ。初代ポケモンでは8つバッジを集めるとラストダンジョンに行く事が出来る。ハナダシティは2つ目のバッジが手に入る所である。というとゲームにまだ慣れるレベルにはまだ到達していない辺りだろうか。
僕はエンジニアだ。何かを作っている最中に問題に出くわした場合、googleに検索をかける。そうすると同じような問題でひっかかった先人たちが、その問題の解決方法をWeb上で発信してくれているのでそれを参考にすれば、大抵の問題はクリアする事が出来る。「はあ ヨカッタ一件落着」って感じなのだがそれで終わりにする事が最近出来ない。Web上に解決手段をのっけている人たちは僕よりも実力がかなり上だろうなと感じ、「ヤバい」と思うようになってきている。
なぜなら、その人たちがこの業界で戦っている中でぼくはどのレベルだろうかと思うとまだまだで、このままでは将来食っていける気がしないと感じるからだ。
しかし、食うためにコードを書くというと虚しい気分になる。
それならば僕はコードを書く事は止めて別の仕事を探した方が良い。
働き方の議論は横に置いとくてしても、
レベルが高い人たちに共通している事は、食うためにコードを書いているだけの様には見えない事である。
もちろん食うためにコードを書いている部分もあるだろうが、
ブログで情報を発信したり、オープンソースのコミュニティに貢献したりしている様をネット上でみると、楽しみながらやっているように思う。コードを書き発信する事で他の人が反応するなかに楽しさを見出している。
人がすごいと思うようなコードを書いて周りがすごいすごいと言って承認欲求を得ているのかもしれないが、それは軽蔑される行為ではなく健全なモチベートの仕方なのかもしれない。

僕が感じているレベルアップしなければと切羽詰まる気持ちもモチベートの一つなのかもしれないが、僕の場合この感情はいつも「どうしようどうしよう」と考えて結局何も出来ていないというパターンに陥りがちなので、
今回はとりあえずこの焦りは無視して、楽しい事を続けていければと思う。
で、最近の興味はProcessingにある。というかジェネラティブアートとかいう領域か。
焦らないでカオスを楽しみたい。

http://fladdict.net/
を見た時にヤバいと思った。
void draw(){}

Pocket

久しぶりに

時々、ブログの存在を思い出す。
眠たい。寝よう。

Pocket