© code www. All rights reserved.

  • 公開日：

JS：スクロールするとフェードインするReveal機能を実装する方法（jQuery）

スクロールするとフェードインで表示する要素や左右からスライドするアニメーションを作成する方法を紹介します。

HTML

表示したい要素にdata-revealを設定します。

<div class="p-reveal">
  <div class="p-reveal__img" data-reveal>
    <img src="/img/curvedslide1.jpg" alt="">
  </div>
  <div class="p-reveal__img" data-reveal>
    <img src="/img/curvedslide2.jpg" alt="">
  </div>
  <div class="p-reveal__img" data-reveal>
    <img src="/img/curvedslide3.jpg" alt="">
  </div>
  <div class="p-reveal__img" data-reveal>
    <img src="/img/curvedslide4.jpg" alt="">
  </div>
</div>

CSS

JSでdata-reveal要素にshowの値を設定するので、その要素にopacity:1;や表示後のスタイルを設定します。

.p-reveal__img {
  position: relative;
  width: 300px;
  margin: 300px 0 0;
  opacity: 0;
}
.p-reveal__img:nth-child(odd) {
  transform: translateX(-20px);
}
.p-reveal__img:nth-child(even) {
  margin-left: auto;
  transform: translateX(20px);
}
.p-reveal__img[data-reveal=show] {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1s, opacity 1s;
}

JavaScript（jQuery）

data-reveal要素の位置を算出し、スクロール時のウィンドウの下部より300px超えた時にshowを付与するコードです。
offsetTop：要素の上部の位置
windowHeight：ウィンドウの高さ
scroll：スクロール時の上部の位置
offsetTop – windowHeight + 300：ウィンドウの下から300pxの位置のトリガー

$(function(){
	function reveal(){
		let $reveal = $('[data-reveal]');
		if($reveal.length) {
			$reveal.each(function(i,elem){
			$(window).on('scroll load resize', function(){
				let offsetTop = $(elem).offset().top,
					windowHeight = $(window).height(),
					scroll = $(window).scrollTop();
					if (scroll >= offsetTop - windowHeight + 300){
						$(elem).attr('data-reveal', 'show');
					}
				});
			});
		};
	};
	reveal();
});
デモを見る

執筆者

astroboy

Webデザイナー&コーダー。HTML/CSS/JavaScript/Vue.js/WebGL/ECサイトなど手広くWeb制作に従事する。現在は東京で活動中。

この記事を気に入りましたら、ぜひ「いいね」「シェア」をお願いします。

関連タグ