【プラグイン不要】CSSだけでパララックス!

intern

パララックスを実装するには、JSライブラリやプラグインを使ったお手頃な実装があります。しかし、それらの中身は複雑で初心者が理解しようとするとハードルはちょっと高いです。。そのため、ちゃんと仕組みを理解してパララックスを実装したいと思う方や、サイトの一部分だけの実装なので、HTMLとCSSだけでサクッと作りたいと思う方は、今回ご紹介する実装を参考にしてみてください!

ではいってみましょう!

画像を固定してパララックスを実装する方法

サンプル1

CONTENT1
CONTENT2
CONTENT3
CONTENT4
CONTENT5

HTML

<div class="parallax_box">
  <div class="parallax_content img_bg_01">CONTENT1</div>
  <div class="parallax_content img_bg_02">CONTENT2</div>
  <div class="parallax_content img_bg_03">CONTENT3</div>
  <div class="parallax_content img_bg_04">CONTENT4</div>
  <div class="parallax_content img_bg_05">CONTENT5</div>
</div>

CSS

.parallax_content{
  display: flex;
  height: 100%;
  padding: 100%;
  justify-content: center;
  align-items: center;

  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.img_bg_01{
  background-image: url();
}
.img_bg_02{
  background-image: url();
}
.img_bg_03{
  background-image: url();
}
.img_bg_04{
  background-image: url();
}
.img_bg_05{
  background-image: url();
}

このCSSでのポイントは背景画像に設定している「background-attachment: filxed」です。これを設定することで、背景画像はスクロールしても動かさずに固定された状態になります。あとは パララックスさせたい画像を並べることで、背景がどんどん変化するパララックスの出来上がり!簡単に実装できますね!

サンプル2

PARALLAX AREA
CONTENT AREA
PARALLAX AREA
CONTENT AREA
PARALLAX AREA
CONTENT AREA
PARALLAX AREA
CONTENT AREA
PARALLAX AREA
CONTENT AREA
PARALLAX AREA

HTML

<div class="parallax_box">
  <div class="parallax_content img_bg_01">PARALLAX AREA</div>
  <div class="front_content">CONTENT AREA</div>
  <div class="parallax_content img_bg_02">PARALLAX AREA</div>
 <div class="front_content">CONTENT AREA</div>
  <div class="parallax_content img_bg_03">PARALLAX AREA</div>
  <div class="front_content">CONTENT AREA</div>
</div>

CSS

.parallax_content{
  min-height: 400px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.front_content{
  padding: 60px;
  background-color: #fff;
}
.parallax_content.img_bg_01{
  background-image: url();
}
.parallax_content.img_bg_02{
  background-image: url();
}
.parallax_content.img_bg_03{
  background-image: url();
}

今度は画像の間に通常のコンテンツエリアを入れてみました。先ほどのCSSを変えずにHTMLを変更するだけで可能です。しかしこの「background-attachment」には欠点があります。それは、スマートフォンなどのモバイル端末でサイトにアクセスした際に、想定外の挙動を起こす可能性があることです。

そのような不安材料を解決する一つの方法として以下のCSSを追加するといいでしょう。

@media screen and (max-width: 768px){
  .parallax_content{
    height: 100%;
    background-image: none;
  }
  .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-hieght: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
  }
  .parallax_content.img_bg_01::before{
    background-image: url();
  }
  .parallax_content.img_bg_02::before{
    background-image: url();
  }
  .parallax_content.img_bg_03::before{
    background-image: url();
  }
}

まず先ほどの不安材料だった「background-attachment」を無効にします。その後に、疑似要素に画像を設定して背面に固定します。この方法で、固定された画像の上にコンテンツエリアをスクロールすることができます。しかし、この方法では1つの画像のみしか固定されないので、スマートフォンも考慮してこのパララックスを実装するには、JSライブラリなどJavaScriptを用いるのが簡単でしょう。

任意の要素にパララックスを実装する

parallax
ParaLux

HTML

<div class="parallax_box">
  <div class="parallax_content parallax_back">
    <div class="title">parallax</div>
  </div>
  <div class="parallax_content parallax_front">
    <div class="title">ParaLux</div>
  </div>
</div>

CSS

.parallax_box{
  perspective: 1px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.parallax_content{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 400px 0;
}
.parallax_front{
  -webkit-transform: translateZ(5px);
  transform: translateZ(5px);
}
.parallax_back{
  -webkit-transform: translateZ(-10px) scale(5);
  transform: translateZ(-10px) scale(5);
}
.title{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

今度は画像以外でのパララックスの実装例です。

この場合のポイントは親要素のスタイルに設定されている「height」および「perspective」プロパティです。これらを設定することにより、親要素の「.parallax_box」に対して、z軸方向の奥行きをつくることができます。

次に、子要素の「. parallax_element」では「position: absolute」で親要素に対して、ユーザーの任意の位置に絶対配置することができます。

「parallax_back」と「parallax_front」では、z軸方向の奥行きの差を「transform: translateZ()」で設定しています。translateZ()の値が低いほど、要素が奥側にいきます。また、要素が奥側にいくほど、要素の大きさが小さくなり、スクロールに対しての動きが小さくなります。要素のサイズについては、「transform: scale()」で任意に調整することができます。

このようにcssだけで、任意の要素に対してスクロールに差をつくり、パララックスを実装することができます。

written by
intern