▼jQuery-パララックスに挑戦-
こんばんわ!
今日はなんと、パララックスに挑戦しました。w
まだ勉強はじめて三ヶ月でなにもわからないような素人が果たしてできるのか、ですよねw。でも、今取りかかっているサイト制作で必要なんです...できれば妥協したくないパララックス...だってやる気があれば何とかなるはず!だから!笑
やる気だけは負けない井上です。うし、ではさっっそく!!
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
▼パララックス効果とは?
パララックス=視差
移動するときに、各物体がそれぞれ異なる動きをすることで、奥行きなどを視覚的効果を作る。
ページのスクロール値を元にして、様々な要素を動かしていくという仕組みのこと。
1、スクロール値を取得。
ここがすべてのはじまりです!
まずはじめにどれだけスクロールしたかという値を取得します。
↓HTML
↓CSS
ページをスクロールすると、その値が表示されるのがわかりますね!
2、Positionを使って動きをつける
取得したスクロール値をつかって、小さい視覚をうごかしてみまあす
↓HTML
↓CSS
では続きはまた明日!
GoodNight !
▼今回参考にさせていただいたサイト
jQuery×HTML5×CSS3を真面目に勉強(1):パララックスエフェクトの基本 (2/4) - @IT
自力で実装するパララックスサイト(基本編) | Cobito Works
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | Developers.IO