先日簡単なパララックス効果を実装してみたんですが、ライブラリとか使わず簡単にできたので、どんな風に作ったかまとめてみようと思います。
今回作ったパララックスの動きは、以下のようなイメージです。
パララックスの仕組み
各セクションでスクロールする速度を変えて、前面と背面が別の空間であるように見せます。
今回の場合は、ドット背景部分のスクロール速度を遅めにすることで視差効果を生んでいます。（上記Gif画像参照）
コード（下準備）
まずはHTMLを用意します。
ポイントは、スクロールするスピードを変えたい要素ごとにidを当ててあげることです。
今回は「dot」部分のみゆっくり動かしたいので、「dot」クラスのついているdivに「id="first"」を当てています。
それ以外の普通のスピードで動いて欲しい部分は、特に何も当てなくても大丈夫なのですが、今回はわかりやすいように、「id="second"」を当てました。
<div class="content">
<div id="first" class="dot">
コンテンツ1
</div>
<div id="second" class="box">
<div class="horizontal-stripe">
コンテンツ2
</div>
<div class="pale-purple">
コンテンツ3
</div>
<div class="violet">
コンテンツ4
</div>
</div>
</div>
「id="first"」がピンク色で囲った部分、「id="second"」が青色で囲った部分に対応しています。
次にCSSです。
以下にはパララックスに関する記述のみ記載しますが、実際に書く時は任意のスタイルも合わせて当ててあげてください。
.content {
position: relative;
}
.dot {
height: 300px; /*任意の高さを指定*/
position: fixed;
top: 0;
z-index: -1;
}
.box {
position: absolute;
top: 300px; /*'dot'に指定した高さ分下げる*/
}
上記、fixedを当てることが重要です。
dot部分をfixedにしていないと、パララックスが効きません。
jQueryでパララックスさせる
私が今回実装したコードを簡単に書くと下記のような感じになります。
$.when(function() {
var scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
$(scrollTag).animate({ scrollTop: 0 }, '1', 'swing', function(){
$('#first').css('top', 0);
});
}).done(function(){
var top = $('#first').offset().top; //y座標の初期値を取得
$(window).scroll(function() {
var value = $(this).scrollTop(); //スクロール値を取得
$('#first').css('top', top + value / -3); //スクロールを遅くする
});
});
分解して解説していきます。
今回は「.when(A).done(B)」なるものを使っています。
これは「Aの処理が終わってからBを実行する」というものです。
今回は、どうしてもAの処理を先に行いたかったのでこのようにしています。
前半
$.when(function() {
var scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
$(scrollTag).animate({ scrollTop: 0 }, '1', 'swing', function(){
$('#first').css('top', 0);
});
})...
前半の「when〜」の部分では、ページを読み込む度に毎回一番上にスクロールするように指定しています。
「id="first"」の部分を「position:fixed;」しているので、読み込んだ時の画面位置が中途半端だと、ちょっと大変なことになります。
fixed指定の特性上、ドット背景の部分が「画面に対して top:0px;」の位置に配置されてしまい、上に戻ってきた時にドット背景の部分が置き去りにされて消えてしまうのです。
後半
... .done(function(){
var top = $('#first').offset().top; //y座標の初期値を取得
$(window).scroll(function() {
var value = $(this).scrollTop(); //スクロール値を取得
$('#first').css('top', top + value / -3); //スクロールを遅くする
});
});
後半、「done〜」の部分では、まず「id="first"」のついたドット背景部分の始まりの位置（y座標）を取得しています。
※おわかりかと思いますが、前半の処理を先に行いたかった理由は、後半で「id="first"」のy座標を取得する必要があるからでした。
そこからスクロールするごとに、現在どのくらいスクロールしているかの値を「scrollTop」で取得。
そのあと「id="first"」のついたドット背景部分のcssに「top: スクロール値/ -3」の値を入れ込んでいる形です。
例えば、現在600px分スクロールしているとします。
そうすると、最後の行は$('#first').css('top', 0 + 600 / -3); となり、値は-200となります。 つまり、「画面に対して -200px の位置にtopがある」状態です。
割る数字は、動かしたいスピードや向きに合わせて、お好みで調整してみてください。
こんな感じでパララックス実装をしてみました。
今回はわかりやすいようにpxで書きましたが、実際は「id="first"」の高さをガチガチにpx指定したくなかったので、jsでwindowの縦幅に合わせて調整する処理も付け加えてました。
それについてはまた機会があれば書こうと思います！
パララックス自体、もっと綺麗にやる方法もあるんじゃないかと思っているので、今後も勉強していきます。