crossline

▼jQuery-パララックスに挑戦-

font-size:12px;line-height: 150%;

 

 

 

 

 

 

こんばんわ!

今日はなんと、パララックスに挑戦しました。w

 

 

 

 

 

 

まだ勉強はじめて三ヶ月でなにもわからないような素人が果たしてできるのか、ですよねw。でも、今取りかかっているサイト制作で必要なんです...できれば妥協したくないパララックス...だってやる気があれば何とかなるはず!だから!笑

 

 

 

 

やる気だけは負けない井上です。うし、ではさっっそく!!

 

 

 

 

 

 

▼▼▼

 

 

 

▼パララックス効果とは?

パララックス=視差

 

移動するときに、各物体がそれぞれ異なる動きをすることで、奥行きなどを視覚的効果を作る。

ページのスクロール値を元にして、様々な要素を動かしていくという仕組みのこと。

 

 

 

 

 

1、スクロール値を取得。

ここがすべてのはじまりです!

まずはじめにどれだけスクロールしたかという値を取得します。

 

↓HTML

f:id:ishuko:20140702011626p:plain

 

 

CSS

f:id:ishuko:20140702011651p:plain

 

 

ページをスクロールすると、その値が表示されるのがわかりますね!

 

 

 

 

 

 

2、Positionを使って動きをつける

取得したスクロール値をつかって、小さい視覚をうごかしてみまあす

 

 

↓HTML

f:id:ishuko:20140702014001p:plain

 

CSS

f:id:ishuko:20140702014033p:plain

 

 

では続きはまた明日!

 

 

 

 

 

GoodNight !

 

 

 

▼今回参考にさせていただいたサイト

jQuery×HTML5×CSS3を真面目に勉強(1):パララックスエフェクトの基本 (2/4) - @IT

自力で実装するパララックスサイト(基本編) | Cobito Works

 

HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | Developers.IO