ピュアJavaScriptで多分簡単に実装できるパララックス
2116 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回はJavaScriptで作るパララックスの解説をします。
ネットの情報を探すとjQueryで実装したりライブラリを使う人が多いみたいですが複雑なJavaScriptではないので記述で作成することにしました。
それでは作成方法の解説をします。
実装方法
考え方はシンプルです。
今回パララックスに使う画像は4枚ですが縦に並べます。（画像は自分で用意してください）
画面をスクロールする時に画像4枚が下から上に動いていくのではパララックスができないので一番上だけ表示（JavaScriptを使うがCSSでもいい）して2枚目以降を非表示（display:none）にします。
画面をスクロールする時に画像は固定（position:absoluteとtop:0もしくはposition:fixedとtop:0）して文字だけ上に動く事でパララックスを出します。
このままだと2枚目以降の画像は非表示ですが画面をスクロールして2枚目以降の画像が非表示の状態で画面に入ってきたらJavaScriptを使って「display:blockとposition:fixed」が入ったクラスをつける事で表示して画面一番上に固定して（背景画像があるparallaxクラスを含む）sectionタグが上に移動して画面から消えたら「position:fixed」のクラスを外して画像は表示したまま上に移動できるようにして2つ目・3つ目・4つ目のsectionタグの内容を表示していきます。
デモ画面
デモはここから見ることができます。
コードと解説
コードは↓です。
パララックスはサイトを作成する時に使いますが必ずreset.cssを入れます。
だからCSSにreset.cssを入れてますがあなたが普段使っているreset.cssでいいので必ず入れてください。
画像4つを最初非表示にするのは114行目です1枚目の画像だけ表示の状態にするのは157行目です。
4つの画像の内1枚目の画像が画面の一番上で固定されている状態は113行目です。（2枚目〜4枚目の画像にも適用されますが1枚目の画像が表示されている状態では非表示です）
スクロールしていくと2枚目〜4枚目の画像が表示されて画面の一番上で固定された状態になるの部分の説明ですが159行目〜176行目です。
162行目の「section[i].getBoundingClientRect().top」は画面一番上の左からsectionタグまでの距離で「section[i].getBoundingClientRect().bottom」が画面一番左下からsectionタグまでの距離です。
また166行目の「window.innerHeight」は画面いっぱいの高さです。
図にすると↓です。（2つ目のsectionタグで考えます）
2つ目のsectionタグの内容ですが画面を上にスクロールする前はwindow.innerHeightの値よりもsection[i].getBoundingClientRect().topの値の方が大きくこの時は非表示のままにしています。
画面を上にスクロールするとsection[i].getBoundingClientRect().topの値がだんだんと小さくなりますが2つ目のsectionタグが1つ目のsectionタグの中にきたらwindow.innerHeightの値がsection[i].getBoundingClientRect().topの値より大きくなります。
図にすると↓です、緑色の矢印の長さと青色の矢印の長さを比較してください。
こうなった時（166行目〜168行目）にparallaxクラスにblockクラス（146行目〜148行目）をつけることで2つ目のsectionタグを表示します。
また2つ目以降のsectionタグですが上にスクロールしていく時に画面に表示されている間は画面一番上に固定されて画面から見えなくなったら画面一番上に固定するのを解除するのを170行目〜174行目です。
これを1つ目〜4つ目のsectionタグで行うのが160行目のfor文です。
これで完成です。