OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

プラグイン不要の基本的なパララックス効果をサイトに実装する

最終更新日:2020.2.15 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');
    }
  });
});
  サンプルはこちらから   これくらいならプラグインを使わなくても手軽に導入することができますし、シンプルな構造なのでカスタマイズも簡単です。ぜひお試しください。  
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

COMMENTS

  • Seventh

    2020.3.26
    はじめまして。 上の方と同じく、一瞬画像が表示され切り替わります。 動きはスムーズで大変使いやすいので、どうか修正お願いしたいのですがむつかしいのでしょうか。 どうか、お答えを頂戴できたらと思います。どうぞよろしくお願いいたします。
  • あちうむ

    2020.3.9
    はじめまして。 スマホでパララックスを実装する方法を探しており 参考にさせていただきました。 「2. jQueryで実装する背景遅延のパララックス効果」を実装したかったのですが、 スマホ実機で見た場合、一瞬背景画像の上部が表示され、 スクロールするとパララックス効果に切り替わります。 DEMOを実機で確認しましたが、同じ症状でした。 実機はiPhone11Proです。 解消したいのですが、なにか方法はありますでしょうか?
  • オガワ シンヤ

    2019.12.23
    ふくちん様 コメントありがとうございます。「background-attachment: fixed;」の部分ですが、ご指摘の通りサイト記事上のコードに誤植があったようで、正しくは不要です。コードの方はアップデートいたしました。ご指摘ありがとうございました。
  • ふくちん

    2019.12.15
    はじめまして。パララックスをスマホで実装するための方法を探していました。 このページで紹介していたやり方が一番シンプルで使いやすかったのです。ありがとうございます。 ただ、実装するにあたって気付いたのが、実際のデモでのコードと、こちらのページで紹介しているコードが若干異なっており、そのせいで実装ができなかったことがありました。 例えば、私は3番目のJSを使ったやり方を実装したのですが、デモの.parallaxには「background-attachment: fixed;」はありません。 よろしくお願いいたします。
  • オガワ シンヤ

    2019.5.4
    へっぽこ様 コメントありがとうございます。ご質問の件について、どの部分が原因で上手くいかないのかが現状わからないのでご返答が難しいのですが、やっていることとしては基本的にスクロール量を取得して、その値をパララックス表現をさせる要素の背景画像のポジションに適用させているだけですので、そのあたりに焦点を当てて確認するといいのではないでしょうか。
  • へっぽこ

    2019.4.29
    はじめまして、こんにちは。 パララックス表現、やってみたいと思って探しておりましたら、こちらに行き着きました。 2つめのものがまさにやってみたいと思っていたことだったので、とても参考になりました。 ありがとうございました。 ただ、サンプルは3つのブロックがありますが、これを1つのブロックだったらどうすればいいかと あれこれやってみたのですが、どうもうまくいかず。 単純に余分なブロックを消せば良いというわけではなく。 じゃあどうすればうまくいくのか分からず困っております。 もし可能でしたらご教授いただければ幸いです。 よろしくお願いいたします。

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram