読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

パララックスサイトの練習1

どうも!chuckです。

本日からパララックスサイトの練習を始めました。

 

かっこいい見た目のサイトを作るための練習です(`・ω・´)ゞ

 

お世話になったサイト様↓↓

webdesignmagazine.net

 

 

○スクロールの値を取る。

まず、何はともあれスクロールです。

ブラウザ画面でスクロールが行われ、どれくらいのスクロールだったのか。パララックスサイトはそこから始まります。

スクロールイベントは、

$('hoge').scroll(function(){

    //処理文

});

として記述します。

scroll(fn) - jQuery 日本語リファレンス

 

そしてスクロールの値は、

$('hoge').scrollTop();

として取得します。スクロールイベントと似ていますがこちらは値を取得します。

scrollTop() - jQuery 日本語リファレンス

 

そしてコーディングしたのがこちら!

f:id:chuck0523:20150601222931p:plain

 

これをスクロールすると、、、、

f:id:chuck0523:20150601222955p:plain

右上にスクロールした値が表示されました\(^o^)/

 

 

○要素を動かす

次に、カンタンなボックスを動かしてみます。

f:id:chuck0523:20150601225020p:plain

最初は横並びだったボックスたちが、

f:id:chuck0523:20150601225046p:plain

スクロールするとバラバラに降下していきます。

 

 

f:id:chuck0523:20150601225425p:plain

横方向の動きも取り入れてみました。

 

○実践??

たぶんこのボックスを写真に変えてぐりぐりやると、かっこいいパララックスサイトができるんだろうなあと思いました。

 

でも、それはまた次回!手短でしたが今日はこれにて!