プラグイン不要の基本的なパララックス効果をサイトに実装する
最終更新日: Update!!
パララックス効果を採用したサイトが一時期ブームになっていましたが、それに合わせてたくさんのプラグインが登場しました。ただプラグインで実装しようとすると細かなカスタマイズが面倒だったりと少し使いづらい面もあります。
そこで今回はプラグインを使わず、カスタマイズしやすいパララックス効果を実装していきたいと思います。
1. CSSのみで実装する背景固定のパララックス効果
背景画像を固定にすることで、スクロールした時にコンテンツエリアが前面にあるように見せる方法です。わかりやすいパララックス効果になります。 【HTML】<div class="wrap"> <div class="parallax bg-01">背面:パララックスエリア </div> <div class="content">前面:コンテンツエリア </div> <div class="parallax bg-02">背面:パララックスエリア </div> <div class="content">前面:コンテンツエリア </div> </div>【CSS】
.parallax { min-height: 400px; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .content { padding: 60px; background-color: #fff; } .parallax.bg-01 { background-image: url(../img/sample-01.jpg); } .parallax.bg-02 { background-image: url(../img/sample-02.jpg); }サンプルはこちらから
background-attachment: fixed;とbackground-size: cover; がスマホで正しく表示されない
スマホの場合、background-attachment: fixed;が効かず、固定にならない状態でそのままスクロールする現象やbackground-size: cover;で正しく拡大されないなどの問題が発生します。その対策として擬似要素を生成してその擬似要素を、z-index: -1;で背面にまわし、position: fixed;で固定させることで対応する手法があります。モバイル表示の用に下記のCSSを追加します。ただし仕様上、ページ内で複数のセクションに対応するのはCSSだけでは難しそうですが。 【CSS】/* mobile bugfix */ @media screen and (max-width: 575px) { .parallax { background-image: none !important; height: 100%; } .parallax::before { content: ""; display: block; position: fixed; top: 0; left: 0; -webkit-transform: translate3d(0, 0, -1px); transform: translate3d(0, 0, -1px); width: 100%; min-height: 100%; -webkit-background-size: cover; background-size: cover; z-index: -1; } .parallax.bg-01::before { background-image: url(./images/20170910_01.jpg); } .parallax.bg-02::before { background-image: url(./images/20170910_01.jpg); } .parallax.bg-03::before { background-image: url(./images/20170910_01.jpg); } }サンプルはこちらから(スマホで確認ください)
2. jQueryで実装する背景遅延のパララックス効果
スクロールイベントに合わせて背景画像の位置をずらすことにより視差効果を表現しています。背景画像をずらす速度は変数でコントロールすることができ、背景遅延の調整が可能です。より自然な形のパララックスになります。 【HTML】<div class="wrap"> <div class="parallax bg-01" id="parallax-01">背面:パララックスエリア </div> <div class="content">前面:コンテンツエリア </div> <div class="parallax bg-02" id="parallax-02">背面:パララックスエリア </div> <div class="content">前面:コンテンツエリア </div> </div>【CSS】
.parallax { min-height: 400px; background-position: center top; background-repeat: no-repeat; background-size: cover; } .content { padding: 60px; background-color: #fff; } .parallax.bg-01 { background-image: url(../img/sample-01.jpg); } .parallax.bg-02 { background-image: url(../img/sample-02.jpg); }【javascript】
$(function(){ var target1 = $("#parallax-01"); var targetPosOT1 = target1.offset().top; var target2 = $("#parallax-02"); var targetPosOT2 = target2.offset().top; var targetFactor = 0.5; var windowH = $(window).height(); var scrollYStart1 = targetPosOT1 - windowH; var scrollYStart2 = targetPosOT2 - windowH; $(window).on('scroll',function(){ var scrollY = $(this).scrollTop(); if(scrollY > scrollYStart1){ target1.css('background-position-y', (scrollY - targetPosOT1) * targetFactor + 'px'); }else{ target1.css('background-position','center top'); } if(scrollY > scrollYStart2){ target2.css('background-position-y', (scrollY - targetPosOT2) * targetFactor + 'px'); }else{ target2.css('background-position','center top'); } }); });サンプルはこちらから これくらいならプラグインを使わなくても手軽に導入することができますし、シンプルな構造なのでカスタマイズも簡単です。ぜひお試しください。
sponserd
keyword search
categories
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
comments
Seventh
あちうむ
オガワ シンヤ
ふくちん
オガワ シンヤ
へっぽこ