文系学生のプログラミング学習5日目ーパララックスサイトー

パララックスサイト作成

今日はドットインストールでパララックスサイトを作りました。

jQueryのscroll.Topという関数を使って、x/y方向の値を決めるというやり方でした。
パララックス効果を使ったサイトをあまり使ったことがないのですが、あまり使われてないのですかね？
スマホのサイトでは広告がスクロールしてもついてきて鬱陶しいと感じることはありますが．．．
広告つきのサイトを見つけたらソースをのぞいてみようと思います。

パララック効果でそれぞれの動きをずらす

単に箱を下に落とすもの、画像をスクロールするもの、マウスに合わせて箱が動くものという３つを作成したのですが、それぞれのものの動き方を変えるためには、それぞれに違う任意の値を掛けたり、割ったりすることで動きを変えることが出来ます。

具体的には下のように、A/B/Cの部分に違う数字を入れます

    $('#box1').css('top', pos1.top + dy / A);
    $('#box1').css('left', pos1.left + dy / A);
    $('#box1').css('width', 40 + dy * A);

    $('#box2').css('top', pos2.top + dy / B);
    $('#box2').css('left', pos2.left + dy / B);

    $('#box3').css('top', pos3.top + dy / C);
    $('#box3').css('left', pos3.left + dy / C);

こうすることで、box1、box2、box3が違う動きをするようになります。

これはjQueryだけでなく、他でも応用できると思うので覚えておきたいです。

終わり