常連

注目の的

質問力

自己紹介

### 発生している問題・前提・実現したいこと

仕事で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">

<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>
</section>

<section id="stage2" class="stageBase">
<div class="fieldWrap">
<p>ここは2ページ目</p>
<div class="scroll-animation anime01"><img src="img/img.png"></div>
</div>
</section>

</div>

</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;
}

```

ここにより詳細な情報を記載してください。