【jQuery】fullPage.jsでsection毎にcssアニメーションを実行する方法

発生している問題・前提・実現したいこと

仕事でWebサイトを作成しており、この度初めて利用させていただきます。
（htmlとcssは知識が古めですが自力で打てます。javaScriptは詳しくなく参考サイトを見つけてコピペが多いです）

フルスクリーンのコンテンツをスクロール単位で切り替える構造のページを作成し、section毎にcssアニメーションの効果が付いた画像を配置しようとしています。
参考サイトのサンプル（http://black-flag.net/jquery/20140527-5155.html）をもとに作成。
ほぼ構造はそのまま変えておりません。
各sessionがスクロールで表示されてからアニメーションが開始されるようにしたいです。

発生している問題・エラーメッセージ

スクロールしてsessionが切り替わってもアニメーションが開始されない。

該当のソースコード

【HTMLファイル】

<!DOCTYPE html>
<html xml:lang="ja" lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=0">
<title>sample</title>
<link rel="stylesheet" href="css/common.css">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
	var setWrap = $('#container'),
	setBase = $('.stageBase'),
	scrollSpeed = 1000,
	scrollEasing = 'swing',
	slideSpeed = 500,
	slideEasing = 'linear',
	downBtn = 'show', // 'show' or 'hide'
	urlHash = 'on', // 'on' or 'off'
	setHash = '!page';

	var url = document.URL,
	stageSlide = $('.stageSlide');

	setWrap.append('<nav id="pageNav"><ul></ul></nav>');
	setBase.each(function(i){
		$('#pageNav ul').append('<li class="pagePn'+(i+1)+'"><a href="javascript:void(0);"></a></li>');
	});

	if(downBtn == 'show'){
		setWrap.append('<div id="pageDown"><a href="javascript:void(0);"></a></div>');
	}

	var coreNav = $('#pageNav'),
	setNav = coreNav.find('ul'),
	navList = setNav.find('li'),
	navLength = navList.length;
	setNav.find('li:first').addClass('activeStage');
	$('body').attr('data-page','1');

	$(window).load(function(){
		// StageHeight
		$(window).resize(function(){
			var wdHeight = $(window).height();
			setBase.css({height:wdHeight});

			var resizeContTop = parseInt(setWrap.css('top'));

			if(resizeContTop === 0){
				setWrap.css({top:'0'});
			} else {
				var activeStagePos = setNav.find('li.activeStage');
				activeStagePos.each(function(){
					var posIndex = navList.index(this);
					setWrap.css({top:-(wdHeight*posIndex)});
				});
			}

			coreNav.each(function(){
				var navHeight = $(this).height();
				$(this).css({top:((wdHeight)-(navHeight))/2});
			});
		}).resize();

		// MouseWheelEvent
		var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
		$(document).on(mousewheelevent,function(e){
			if(!(setWrap.is(':animated'))){
				e.preventDefault();
				var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
				if (delta < 0){
					motionDown();
				} else {
					motionUp();
				}
			}
		});

		// FlickEvent
		var isTouch = ('ontouchstart' in window);
		setWrap.on(
			{'touchstart': function(e){
				if(setWrap.is(':animated')){
					e.preventDefault();
				} else {
					this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
					this.topBegin = parseInt($(this).css('top'));
					this.top = parseInt($(this).css('top'));
					this.touched = true;
				}
			},'touchmove': function(e){
				if(!this.touched){return;}
				e.preventDefault();
				this.top = this.top - (this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY));
				this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
			},'touchend': function(e){
				if (!this.touched) {return;}
				this.touched = false;

				if(((this.topBegin)-30) > this.top){
					motionDown();
				} else if(((this.topBegin)+30) < this.top){
					motionUp();
				}
			}
		});

		// ScrollUpEvent
		function motionUp(){
			var stageHeightU = setBase.height(),
			contTopUp = parseInt(setWrap.css('top')),
			moveTopUp = contTopUp + stageHeightU;
			$('input,textarea').blur();
			if(!(contTopUp === 0)){
				setWrap.stop().animate({top:moveTopUp},scrollSpeed,scrollEasing);
				setNav.find('li.activeStage').removeClass('activeStage').prev().addClass('activeStage');

				var acvStageP = parseInt($('body').attr('data-page')),
				setPrev = acvStageP-1;
				$('body').attr('data-page',setPrev);
				if(downBtn == 'show'){
					pagePos();
				}
			}
			if(urlHash == 'on'){
				replaceHash();
			}
		}

		// ScrollDownEvent
		function motionDown(){
			var stageHeightD = setBase.height(),
			contTopDown = parseInt(setWrap.css('top')),
			moveTopDown = contTopDown - stageHeightD;
			$('input,textarea').blur();

			var contHeight = setWrap.height(),
			maxHeightAdj = -(contHeight - stageHeightD);

			if(!(contTopDown == maxHeightAdj)){
				setWrap.stop().animate({top:moveTopDown},scrollSpeed,scrollEasing);
				setNav.find('li.activeStage').removeClass('activeStage').next().addClass('activeStage');

				var acvStageN = parseInt($('body').attr('data-page')),
				setNext = acvStageN+1;
				$('body').attr('data-page',setNext);
				if(downBtn == 'show'){
					pagePos();
				}
			}
			if(urlHash == 'on'){
				replaceHash();
			}
		}

		// SideNaviClick
		navList.click(function(){
			if(!(setWrap.is(':animated'))){
				var crtIndex = navList.index(this),
				crtHeight = $(window).height();
				setWrap.stop().animate({top:-(crtHeight*crtIndex)},scrollSpeed,scrollEasing);
				setNav.find('li.activeStage').removeClass('activeStage');
				$(this).addClass('activeStage');

				$('body').attr('data-page',crtIndex+1);

				if(downBtn == 'show'){
					pagePos();
				}
				if(urlHash == 'on'){
					replaceHash();
				}
			}
		});

		// PageDownBtnClick
		$('#pageDown a').click(function(){
			if(!(setWrap.is(':animated'))){
				var navActive = setNav.find('li.activeStage');
				navActive.each(function(){
					var navIndex = navList.index(this),
					setNav = navIndex+1;
					if(!(setNav == navLength)){
						$(this).next().click();
					}
				});
				if(urlHash == 'on'){
					replaceHash();
				}
			}
		});
		function pagePos(){
			var pnAcv = coreNav.find('li.activeStage');
			pnAcv.each(function(){
				var pnIndexN = navList.index(this),
				pnCountN = pnIndexN+1;
				if(pnCountN == navLength){
					$('#pageDown').css({display:'none'});
				} else {
					$('#pageDown').css({display:'block'});
				}
			});
		}

		// HashReplace
		function replaceHash(){
			var pnAcv = coreNav.find('li.activeStage');
			pnAcv.each(function(){
				var pnIndexN = navList.index(this),
				pnCountN = pnIndexN+1;
				location.hash = setHash + pnCountN;
			});
		}
		if(urlHash == 'on'){
			replaceHash();
		}

		// OpeningFade
		$('body').css({visibility:'visible',opacity:'0'}).animate({opacity:'1'},1000);

		// LoadPageMove
		if(url.indexOf(setHash) !== -1){
			var numSplit = ((url.split(setHash)[1])-1);
			navList.eq(numSplit).click();
		}
	});

	// HashChangeEvent
	if(urlHash == 'on'){
		$(window).on('hashchange',function(){
			var stateUrl = document.URL,
			hashSplit = ((stateUrl.split(setHash)[1])-1);
			navList.eq(hashSplit).click();
		});
	}
});
</script>

<script>
function scrollChk(){
  var scroll = $(window).scrollTop();
  var windowHeight = $(window).height();
  
  
    jQuery('.scroll-animation').not('.active').each(function(){
        var pos = $(this).offset().top;
        if (scroll > pos - windowHeight){ 
            $(this).addClass("active");
        }
    });
}
$(window).scroll(function (){
    scrollChk();
});
$('body').on('touchmove', function() {
    scrollChk();
});
</script>

</head>

<body>

<div id="container">

<section id="stage1" class="stageBase">
<div class="fieldWrap">
<p>ここは1ページ目</p>
</div><!--/.fieldWrap -->
</section>

<section id="stage2" class="stageBase">
<div class="fieldWrap">
<p>ここは2ページ目</p>
<div class="scroll-animation anime01"><img src="img/img.png"></div>
</div><!--/.fieldWrap -->
</section>

</div><!--/#container-->

</body>
</html>

【cssファイル】

/* =======================================
	reset
======================================= */

* {
	margin: 0;
	padding: 0;
}

/* =======================================
	CommonElements
======================================= */
body {
	text-align: center;
	position: relative;
	overflow: hidden;
	visibility: hidden;
}

/* #container
--------------------------- */
#container {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
	z-index: 1;
}

/* .stageBase
--------------------------- */
.stageBase {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.stageBase .fieldWrap {
	padding: 100px 0 0 0;
	text-align: center;
}
#stage1 {background:#fff;}
#stage2 {background:#eee;}

/* #pageNav
--------------------------- */
#pageNav {
	top: 0;
	right: 25px;
	width: 15px;
	text-align: center;
	position: fixed;
	z-index: 2;
}
#pageNav ul {
	width: 15px;
	display: block;
}
#pageNav ul li {
	padding-bottom: 5px;
	width: 15px;
	height: 15px;
	display: block;
	overflow: hidden;
}
#pageNav ul li a {
	width: 15px;
	height: 15px;
	background: transparent url(../img/nav.png) no-repeat center center;
	display: block;
}
#pageNav ul li.activeStage a {
	background: transparent url(../img/nav_acv.png) no-repeat center center;
}

/* #pageDown
--------------------------- */
#pageDown {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	text-align: center;
	position: fixed;
	overflow: hidden;
	z-index: 3;
}
#pageDown a {
	margin: 0 auto;
	width: 30px;
	height: 30px;
	background: transparent url(../img/next_arw.png) no-repeat center center;
	display: block;
}


/* #animation
--------------------------- */
.anime01 {
  transform: scale(2) rotate(0deg);
  opacity: 0;
  transition: 2s cubic-bezier(.4, 0, .2, 1);
}

.anime01.active {
  transform: scale(1) rotate(0deg);
  margin-top: 0;
  opacity: 1;
}

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2019/08/31 10:38

『.activeが実行されていない感じ』とのことですが、これは「.activeが属性に付加されない」という意味ですか？　それとも、「.activeが付加されてもアニメーションが実行されない」という意味ですか？

garudaflap

2019/08/31 10:57

書き込み有難うございます。他のOnePage Scroll.jsを読み込ませていないページで問題なく使用していたコードを流用したので.activeが属性に付加されていないのだと思います。

Lhankor_Mhy

2019/08/31 11:14

開発者ツールを参照して JavaScript のエラーメッセージをご提示いただけますか？

garudaflap

2019/09/02 00:46

返信が遅くなり申し訳ございません。開発者ツールを参照してみましたが読込直後特にエラーは表示されず、スクロールして他のsessionに進むと「[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.」というエラー文は出てきます。 cssやhtmlなど、載せるコードをもう少し増やしたほうが解決に繋がりやすいでしょうか。

x_x

2019/09/02 04:13

OnePageScroll.js のようなスクリプトを入れているなら実際にはスクロールしていない(transformで動かしているだけ)と思うのですが、scrollTop() の値は確認しましたか？

garudaflap

2019/09/02 06:32

有力なヒントを有難うございます。 scrollTop() の値を確認するにはどうしたら良いのかがまずわかっておらず…勉強不足で申し訳ありません。実際にはスクロールしていないということはスクリプトを書き換える必要があるということでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

One Page Scroll ではコールバックを指定できるようになっていますが、One Page Scroll を使っているのではなく独自実装ということでしょうか？
Intersection Observer を使うことでどのようにスクロールを実現しているのか知らなくても表示されたタイミングを取得できます。

jQuery
1$(window).on('load', function() {
2  var observer = new IntersectionObserver(function(entries, observer) {
3    if (entries[0].intersectionRatio > 0) {
4      observer.unobserve(entries[0].target);
5      $(entries[0].target).addClass('active');
6    }
7  });
8
9  $('.scroll-animation').each(function(index, element) {
10    observer.observe(element);
11  });
12});

Intersection Observer 未対応の IE に対しては polyfill を使ってください。
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

投稿2019/09/02 07:33

x_x

総合スコア13749

garudaflap

2019/09/02 10:11

今更で大変申し訳ありません。自分が実装しているのはOne Page Scrollとばかり思っていたのですが、参考にしていたデモサイトのページを再度確認してみたところOne Page Scrollではなく「fullPage.js」というプラグインでした。 http://black-flag.net/jquery/20140527-5155.html こちらのサイトを参考にさせていただいたのですが、デモページのタイトルがOne Page Scrollとなっていたため勘違いしておりました…お恥ずかしい限りです。後ほど質問内容を修正致します。試しに回答していただいたコードを入力してみたのですがアニメーションが表示されません。 fullPage.js利用の場合はまた違った対応が必要でしょうか？

x_x

2019/09/03 09:19

質問のコードは変わらないのですか？参考にしたページは以前それを紹介したというだけで独自コードのようですが……。質問コードの以下の部分を削除し、回答にあるコードを追加しただけで動くことを確認しています。 $(window).scroll(function (){ scrollChk(); }); $('body').on('touchmove', function() { scrollChk(); }); そもそも書いているコードが違うということであれば質問を編集してください。

garudaflap

2019/09/10 00:46

教えていただいた部分を編集したところ無事アニメーションがsessionの切り替わりと同時に表示されました。（質問内容に記載しているコードは違いありません。ただ、独自コードということでタイトルが不適切かもしれませんのでこの後編集はしておこうと思います。）本当に助かりました！有難うございました！

行動規範の内容に同意します