プラグイン不要の基本的なパララックス効果をサイトに実装する
jQueryパララックス効果を採用したサイトが一時期ブームになっていましたが、それに合わせてたくさんのプラグインが登場しました。ただプラグインで実装しようとすると細かなカスタマイズが面倒だったりと少し使いづらい面もあります。
そこで今回はプラグインを使わず、カスタマイズしやすいパララックス効果を実装していきたいと思います。
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');
}
});
});
サンプルはこちらから
これくらいならプラグインを使わなくても手軽に導入することができますし、シンプルな構造なのでカスタマイズも簡単です。ぜひお試しください。
-
-
この記事を書いた人オガワ シンヤ
DesignSupply.代表 ／ ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中！制作中はチョコレートが欠かせない三十路Webクリエイター。
制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら
デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。
ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。
コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。
こんな記事も読まれています
4 件のコメント
-
-
へっぽこ様
コメントありがとうございます。ご質問の件について、どの部分が原因で上手くいかないのかが現状わからないのでご返答が難しいのですが、やっていることとしては基本的にスクロール量を取得して、その値をパララックス表現をさせる要素の背景画像のポジションに適用させているだけですので、そのあたりに焦点を当てて確認するといいのではないでしょうか。
-
-
はじめまして。パララックスをスマホで実装するための方法を探していました。
このページで紹介していたやり方が一番シンプルで使いやすかったのです。ありがとうございます。
ただ、実装するにあたって気付いたのが、実際のデモでのコードと、こちらのページで紹介しているコードが若干異なっており、そのせいで実装ができなかったことがありました。
例えば、私は3番目のJSを使ったやり方を実装したのですが、デモの.parallaxには「background-attachment: fixed;」はありません。
よろしくお願いいたします。-
ふくちん様
コメントありがとうございます。「background-attachment: fixed;」の部分ですが、ご指摘の通りサイト記事上のコードに誤植があったようで、正しくは不要です。コードの方はアップデートいたしました。ご指摘ありがとうございました。
-
はじめまして、こんにちは。
パララックス表現、やってみたいと思って探しておりましたら、こちらに行き着きました。
2つめのものがまさにやってみたいと思っていたことだったので、とても参考になりました。
ありがとうございました。
ただ、サンプルは3つのブロックがありますが、これを1つのブロックだったらどうすればいいかと
あれこれやってみたのですが、どうもうまくいかず。
単純に余分なブロックを消せば良いというわけではなく。
じゃあどうすればうまくいくのか分からず困っております。
もし可能でしたらご教授いただければ幸いです。
よろしくお願いいたします。