【コピペOK】スクロールで遅れて表示、5分でできるパララックスの実装方法

私だけでしょうか？パララックスって聞くと、なんかポリリズムみたいですよね？

あとパララックスという言葉を聞くと90年代の音楽シーンを思い出すんです。
記憶たどったら、ガンダムWでお馴染みTWO-MIXでした。

僕の、人とのズレは、いずれ人類の進化と共に溝を埋める事にし、最近のWEBサイトでは珍しくもないパララックスについて、書いていきます。

パララックスとは？

翻訳したら「視差」ってでますね。
つまりパララックスとは視差効果のことで、背面とのズレを感じる事で奥行や立体感を与える効果です。

WEBサイトでいうパララックスと言えば、遅れて表示したり、奥行きを感じさせたりする表現をしたサイトですね。
その他、マウスの動きに合わせて対象物が動いたりするものもありますよね。

パララックスを使うと、表示速度のスコアではあまりいい結果がでにくくなるデメリットもあります。
ですが、潜在的に「次はどういった動きになるのか」と、スクロールしたくなるサイトになる可能性も上がるメリットもあります。

ですので、ファーストビューで直帰させずに、少しでもコンテンツを見てもらえやすくなる可能性が増えます。

パララックス実装方法

この記事ではWEBページが表示され、可視範囲に入ったコンテンツが遅れて、ふわっと表示するパララックスの方法を紹介します。

javaScript(jquery)

遅れて表示させたいコンテンツのクラスは任意のクラスや要素に変えてください。
以下の場合.section箇所

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
	$('.section').css('visibility','hidden');
	$(window).on('load scroll', function() {
		var windowHeight = $(window).height(),
			topWindow = $(window).scrollTop();
	 $('.section').each(function(){
		var targetPosition = $(this).offset().top;
		if(topWindow > targetPosition - windowHeight + 100){
			$(this).addClass("fade-in");
			}
		});
	});
</script>

html

特に記載することではないですね。
要素にクラスを指定してあげるか、もともとの要素を上記のjavaScriptに指定してください。

<div class="section">
	<p>遅れて表示</p>
</div>
<div class="section">
	<p>遅れて表示</p>
</div>
<div class="section">
	<p>遅れて表示</p>
</div>

CSS

CSSアニメーションで動きを出します。
なので、動きを変えたい方はここをイジイジ変更するか、指定内容を追加してください。

.section.fade-in {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: fid;
  animation-name: fid;
  visibility: visible !important;
}
@-webkit-keyframes fid {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fid {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

解説

何をしているかというと、まずjavaScriptで指定した要素を非表示にし、スクロールして表示した要素にクラスを付与して表示させ、表示する際にCSSアニメーションで動きをつけているという流れです。

クラスを変えて、複数作成すれば、ふわっと表示させる以外の動きも作成できるので、見せ方によって複数作成してもいいかもしれませんね。

まとめ

見せ方としていろいろあると思うのですが、この記事ではページトップに戻って再度、可視範囲でフェードインさせるもの（繰り返し）ではなく、一度表示させたらそのまま消えない形を紹介してます。

LPページなら問題ないですが、その都度消えたり、いちいち動かれたりすると、イライラすることもありますよね（笑）。。

ブログなど、しっかり読みたい・読んでもらいたいって場合、悪い印象を与えるかもしれません。。
ですので、パララックスを使う要素はどういう印象を与えるかを考えて設置が必要です。