スクロールで遅れて表示、5分でできるパララックスの実装方法ちょちょいのちょい

スクロールで遅れて表示、5分でできるパララックスの実装方法ちょちょいのちょい

どうも、東田ダダーンです。
私だけでしょうか?パララックスって聞くと、なんかポリリズムみたいですよね?
あとパララックスという言葉を聞くと90年代の音楽シーンを思い出すんです。
記憶たどったら、ガンダムWでお馴染みTWO-MIXでした。

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

パララックスとは?

翻訳したら「視差」ってでますね。
視差効果とのことで、よくあるもので言えば、遅れて表示したり、奥行きを感じさせたりする表現をしたサイトですね。

その他、マウスの動きに合わせて対象物が動いたりするものもありますよね。

パララックスを使うと、表示速度のスコアではあまりいい結果がでにくくなる可能性もありますが、潜在的に「次はどういった動きになるのか」と、スクロールしたくなるサイトになる可能性が上がります。ですので、ファーストビューで直帰させずに、少しでもコンテンツを見てもらえやすくなる可能性が増えます。
また、コンテンツがリッチな仕様になるのが、いいですよね。

パララックス実装方法

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

javaScript

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

javaScript
<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に指定してください。

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

CSS

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ページなら問題ないですが、その都度消えたり、いちいち動かれたりすると、イライラすることもありますよね(笑)。。
ブログなど、しっかり読みたい・読んでもらいたいって場合、悪い印象を与えるかもしれません。。
ですので、パララックスを使う要素はどういう印象を与えるかを考えて設置が必要です。

とはいえ、設置も簡単でリッチになるので、初心者の方にもぜひ!

このブログを購読する

当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可を押してください。
押してやってください。
ブログ更新後、ブラウザより更新通知が送られます。