jquery fullPage整页面滚动文字动画特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/jquery.fullPage.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>

3. HTML代码

<div id="fullpage">
	<div class="section one">
		<div class="wrap">
			<h1>Lorem ipsum</h1>
			<h2>Dolor sit amet</h2>
			<div class="cta"><span>shop now</span></div>
		</div>
	</div>
	<div class="section two">
		<div class="wrap">
			<h1>Lorem ipsum</h1>
			<h2>Dolor sit amet</h2>
			<div class="cta"><span>shop now</span></div>
		</div>
	</div>
	<div class="section three">
		<div class="wrap">
			<h1>Lorem ipsum</h1>
			<h2>Dolor sit amet</h2>
			<div class="cta"><span>shop now</span></div>
		</div>
	</div>
</div>
<script type="text/javascript">
(function() {
  $('#fullpage').fullpage({
    navigation: true,
  });
})();
</script>