【コピペでOK！】フワッと表示されるパララックスを実装！

webデザイン , コード , パララックス ,

2020/09/27

ページをスクロールしているとコンテンツがフワッと表示されるアニメーションを見たことがある方は多いかと思います。

パララックスと呼ばれる視差を利用したエフェクトで、ページをスクロールする際にコンテンツと背景とでスクロールの速度に差をつけることで、奥行きや立体感を表現することができます。

なんとなくイケてる感じを出すことができますが、具体的なメリットが存在します。

スクロールは単調な動作ですが、アニメーションをを加えることでユーザーの興味を引くことができ、全体ではなく一部分だけに加えるとその箇所を目立たたせることもできます。

では実際にパララックスを実装していきたいと思います。

デモ

コード紹介

まずはコードの紹介です。前提としてjQueryを使用しているので読み込み、または設置が必要となります。

HTML

<div class="parallax">
    <div class="parallax__box scroll"></div>
    <div class="parallax__box scroll"></div>
    <div class="parallax__box scroll"></div>
</div>

</div>

htmlでは単純に親要素として全体を囲う要素と中身の要素を組み立てます。

デザイン用のクラスとは別でパララックス用のクラス「scroll」を指定しておきます。

css

.parallax {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.parallax__box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.parallax .scroll {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
          transform: translate(0, 50px);
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

.parallax .scroll:nth-of-type(2) {
  -webkit-transition-delay: 300ms;
          transition-delay: 300ms;
}

.parallax .scroll:nth-of-type(3) {
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
}

.parallax .scroll-in {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.parallax {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-pack: distribute;

justify-content: space-around;

}

.parallax__box {

width: 100px;

height: 100px;

background-color: #ccc;

}

.parallax .scroll {

opacity: 0;

-webkit-transform: translate(0, 50px);

transform: translate(0, 50px);

-webkit-transition: all 1000ms;

transition: all 1000ms;

}

.parallax .scroll:nth-of-type(2) {

-webkit-transition-delay: 300ms;

transition-delay: 300ms;

}

.parallax .scroll:nth-of-type(3) {

-webkit-transition-delay: 600ms;

transition-delay: 600ms;

}

.parallax .scroll-in {

opacity: 1;

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

中身の要素を横並びにします。

ここで重要なのは要素のデザインを作った後、クラス「scroll」にtransformで要素を下にずらしておき、transitionでアニメーションの指定をします。delayを利用することで表示するタイミングをずらしています。最後にopacityで要素を非表示にしておきます。

次に表示用のクラス「scroll-in」にtransformで要素を下にずらした分だけ戻るようにしておき、opacityで要素を表示します。

この時点だとhtmlにクラス「scroll-in」を指定していないので非表示の状態です。

js

$(function(){
    $(window).scroll(function (){
        $('.scroll').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 100){
                $(this).addClass('scroll-in');
            }
        });
    });
});

$(function(){

$(window).scroll(function (){

$('.scroll').each(function(){

var elemPos = $(this).offset().top;

var scroll = $(window).scrollTop();

var windowHeight = $(window).height();

if (scroll > elemPos - windowHeight + 100){

$(this).addClass('scroll-in');

}

});

スクロールした際に要素の位置とスクロール量、ウィンドウ全体の高さを取得します。

スクロール量＞要素の位置－ウィンドウ全体の高さ＋100pxとなった時にクラス「scroll-in」を付与します。

解説

htmlで要素の組み立て、cssで表示と非表示の状態を指定、jsでクラスの付与を行っています。

分割して考えると複雑な動作をしているわけでありません。始めに要素を作成しておき後でパララックスを加えると実装しやすいと思います。

まとめ

今回は時間差のあるパララックスを実装しました。

実際に使用する場面では先にクラス「scroll」と「scroll-in」のスタイルをしておき、後でパララックスを実装したい要素にクラス「scroll」を指定するだけで簡単に実装することが可能です。

最初からパララックスを実装していると制作途中にデザインの確認とかしづらいと思うので…

一度cssとjsを設定しておけば使いまわすことができるので是非利用してみてください。