html5全屏页面视差滚动网站特效

代码结构

1. 引入CSS

<link rel="stylesheet" href=" css/style.css">

2. 引入JS

<script src="js/libs/modernizr-2.0.6.min.js"></script>
<script src="js/libs/jquery.min.js"></script>
<script defer="" src="js/libs/jquery-ui-1.8.13.custom.min.js"></script>
<script defer="" src="js/libs/jquery.scrollTo-1.4.2-min.js"></script>
<script defer="" src="js/libs/jquery.animate-enhanced.min.js"></script>
<script defer="" src="js/libs/iscroll-min.js"></script>
<script defer="" src="js/libs/ga.js"></script>
<script defer="" src="js/plugins.js"></script>
<script defer="" src="js/voeux.js"></script>

3. HTML代码

	<div id="share">
		<div class="white">
			<a class="fb" href="https://www.facebook.com/sharer.php?u=http://www.soleilnoir.net/believein/" target="_blank"></a>
			<img class="line" src="img/nav/line_blanc.png">
			<a class="tt" href="https://twitter.com/intent/tweet?text=http://www.soleilnoir.net/believein/" target="_blank"></a>
		</div>
		<div class="black">
			<a class="fb" href="https://www.facebook.com/sharer.php?u=http://www.soleilnoir.net/believein/" target="_blank"></a>
			<img class="line" src="img/nav/line_noir.png">
			<a class="tt" href="https://twitter.com/intent/tweet?text=http://www.soleilnoir.net/believein/" target="_blank"></a>
		</div>
	</div>
	<div id="scrollContainer">
		<div id="scroller">
		</div>
	</div>
	<div id="loader">
				<img src="img/nav/loader.gif">
			</div>
	<div id="turnYourPhone"></div>
	<div id="container">
		<header>
		</header>
		<div id="main" role="main">
			<ul class="bg">
				<li id="start" style="background-color: #f3efe8;" class="noCache black">
					<a id="go" href="javascript:;"></a>
				</li>
				<li id="entertainment" style="background-color: #f47723;"></li>
				<li id="fashion" style="background-color: #66cac9;" class="size2"></li>
				<li id="aliens" style="background-color: #4e4a9d;"></li>
				<li id="soleilnoir" style="background-color: #efeae1;" class="black"></li>
				<li id="iOS" style="background-color: #308694;"></li>
				<li id="ideas" style="background-color: #36b1c5;"></li>
				<li id="health" style="background-color: #fdbd17;" class="black"></li>
				<li id="flash" style="background-color: #e84613;"></li>
				<li id="work" style="background-color: #a86839;"></li>
				<li id="yourself" style="background-color: #a5c26e;"></li>
				<li id="thefuture" style="background-color: #ffe101;" class="black"></li>
				<li id="isnotmylover" style="background-color: #021e2f;"></li>
				<li id="passion" style="background-color: #1d3d1d;"></li>
				<li id="youtube" style="background-color: #f90f49;"></li>
				<li id="typo" style="background-color: #22a0df;"></li>
				<li id="love" style="background-color: #c74565;"></li>
				<li id="end" style="background-color: #f3efe8;" class="noCache black">
					<a id="restart" href="javascript:;"></a>
				</li>
			</ul>
			<div id="nav">
				<div id="arrow"></div>
				<div id="dots">
					<ul></ul>
				</div>
			</div>
		</div>
		<footer>
		</footer>
	</div>