目次
結論
以下のような手順で作成をしていきます
- キービジュアルの作成(HTML)
- 背景を擬似要素を用いて作成
- JavaScript(Gsap)を使って背景画像の表示を切り替える(後述)
上記の手順で進めて参ります！
また、今回のサイトは実案件の内容をもとに作成していますが掲載の許可もいただいていますので悪しからず！
パララックスとは？
パララックスとは視差効果のことで、スクロールなどの動作に応じてさまざまな要素が動いたり、アニメーションさせたりすることでWebサイトに視覚の差異やスピード感・奥行きを演出することを言います。
そんなパララックスですが、cssのプロパティ「background-attachment: fixed;」を用いることで実装することが一応可能です。
しかしこのプロパティ、実はクセがあります。
なんとiOS(iPhoneやiPad)との相性が悪く「background-attachment: fixed;」を指定しても背景が固定されず無効になってしまうのです。
そこで擬似要素を利用して背景を固定する方法が色んなサイトで公開されていますが、実務で使うとなるといまいち情報が足りていないという印象を受けました。
そのため、今回は実務で使えるパララックスの実装方法について紹介してみようかと思います！
ゴール
ひとまず完成形を見ていただこうと思います！
この動画のように、スクロールに合わせて背景画像が固定されて追従されるようにできていればOKです！
手順① HTMLでKVを作成し、CSSで背景の見た目を設計する
まずHTMLでキービジュアルを作成します。
<div class="m_page_kv">
<div class="m_page_kv-title">
<div class="m_page_kv-title__inner">
<p class="m_page_kv-title__jp">お問い合わせ</p>
<p class="m_page_kv-title__en">Contact</p>
</div>
</div>
</div>
<!-- /.m_page_kv -->CSS(SCSS)で、見た目を整えていきます。
.body {
background: none 0 0/auto repeat scroll padding-box border-box rgba(0,0,0,0);
//背景を表示させるために必要な記述
}
.m_page_kv {
height: 100vh;//要素本体の高さを設定
width: 100vw;//要素本体の横幅を設定
position: relative;//.m_page_kv-titleの位置を調整するのに必要
//以下の擬似要素でパララックスの見た目を作る
&::after {
content: "";
position: fixed;//背景を固定し、スクロール時に追従させる
top: 0;//スクロールして追従させるために、位置を固定させる
left: 0;//スクロールして追従させるために、位置を固定させる
width: 100vw;//擬似要素は本来存在しないものなので、本体と横幅を合わせる
height: 100vh;//擬似要素は本来存在しないものなので、本体と高さを合わせる
background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)), url(../img/page-kv.jpg) no-repeat center center/ cover;
z-index: -1;//他の要素より下に来ないと背景として追従できないので、-1と設定し最下層へ
}
&.js-active {
visibility: hidden;//後述
}
}
ここでのポイントとしては、主に以下の4点です。
- bodyのcssを設定し、背景を透過する(transparentでも可)
- 要素本体と擬似要素に、widthとheightを設定
- 擬似要素をposition: fixed;で追従できるようにする
- z-index: -1;にすることで、最背面に画像を設置し他の要素に被らないようにする
これができればひとまずパララックス自体は完成です！
ですが、このままだといつまでも背景画像が表示されてしまいオーバースクロールすると背景が透けてしまいサイトとして不恰好になってしまいます(動画参照)。
そのため「ある一定の要素を通過した時にKVを見えなくする」という記述を、JavaScript(Gsap)で実装していこうかと思います。
手順③ JavaScript(Gsap)で、背景にあるkvを見えなくする
JSで制御すると以下のようになります(動画参照)
このように、背景を不可視化してサイトとして不恰好にならないようにもう一工夫していこうかと思います！
まずはCSSに追記する内容から見ていき、その後にJSのコードを確認していきましょう！
CSS追記する内容
要素を隠すため、jsアニメーション時に適用するCSSを追記する。
.m_page_kv.js-active {
visibility: hidden;//見えなくする記述
}JSのコード
ある要素を通過した際に、JSが発火するようにコードを記載(scrollTrigger使用)
ScrollTrigger.create({
trigger: '.js-trigger', //アニメーションが始まるトリガーとなる要素
start: 'top top',//要素&ビューポートの頂点でアニメーション開始
end: 'bottom+=100000000000',
//アニメーションを中途半端なところで終わらせないために、要素の底から+100000000000(大袈裟すぎ)の位置で終了するように設定
toggleClass: {targets: ".about_bg-fixed, .m_page_kv", className: "js-active"}, //クラスをつけたり、外したりできる
});今回のJSの記述の場合「js-trigger」という要素の頂点を通過したら(trigger)、クラスの付け外し(toggleClass)をするという記述になっています！
こうすることで、背景の表示切り替えを制御できるようになります！
Gsap本当に偉大です。
まとめ
今回はパララックスについて紹介しました！
実務レベルで使えそうな記事ってなかなか見つからないので、今回は結構貴重な記事になるのではないかと思っています！
特にGsapはアニメーションに特化したJavaScriptライブラリで、イケてるサイトではほとんど使われていると言っても過言ではないくらい使われています。
色んな可能性を秘めたライブラリですので、ぜひリッチなサイト作りの参考にしていただけたら幸いです！
