[img]http://dl2.iteye.com/upload/attachment/0108/6730/ebe83531-de0b-3b58-8a0a-99e44476a4d9.png[/img]
<!DOCTYPE html>
<html>
<head>
<title>Parallax Scrolling Website</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="http://jackrimell.co.uk/assets/img/favicon.png"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<!-- waypoint1.1版本比较小,这里也够用了。 -->
<script type="text/javascript" src="js/jquery.waypoints1.1.min.js"></script>
<!-- 需要更多的动画函数,可以引入该插件 -->
<!-- script type="text/javascript" src="js/jquery.easing.1.3.js"></script -->
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="navigation">
<ul id="navBar">
<li data-slide="1" class="current"></li>
<li data-slide="2"></li>
<li data-slide="3"></li>
<li data-slide="4"></li>
</ul>
</div>
<h1 data-stellar-ratio="0">Parallax Scrolling<br>Website</h1>
<div class="slide" id="slide1" data-slide="1">
<h3>默认情况下,超出viewport的元素会被隐藏。配置项:hideDistantElements:true 可以控制</h3>
<!-- 该元素的初始位置top:300px,stellar计算得出为:(1-0.7) * (-450) + 300 = 165px -->
<div data-stellar-ratio="0.7" data-stellar-vertical-offset="-450" id="ball1">ball1</div>
<!-- 该元素的初始位置top:80px,stellar计算得出为:(1-2.7) * (-300) + 80 = 560px -->
<div data-stellar-ratio="2.6" data-stellar-vertical-offset="-300" id="ball2">ball2</div>
<div data-stellar-ratio="0.6" data-stellar-vertical-offset="500" id="ball3">ball3</div>
<div data-stellar-ratio="2.9" data-stellar-vertical-offset="-380" id="ball4">ball4</div>
<a class="button" data-slide="2" title=""></a>
</div>
<div class="slide" id="slide2" data-slide="2" >
<div data-stellar-ratio="2.6" data-stellar-vertical-offset="-350" id="ball2"></div>
<div data-stellar-ratio="2.9" data-stellar-vertical-offset="-380" id="ball4"></div>
<a class="button" data-slide="3" title=""></a>
</div>
<div class="slide" id="slide3" data-slide="3" >
<div data-stellar-ratio="0.7" data-stellar-vertical-offset="-450" id="ball1"></div>
<div data-stellar-ratio="2.6" data-stellar-vertical-offset="-350" id="ball2"></div>
<div data-stellar-ratio="0.9" data-stellar-vertical-offset="-230" id="ball3"></div>
<div data-stellar-ratio="2.9" data-stellar-vertical-offset="-380" id="ball4"></div>
<a class="button" data-slide="4" title=""></a>
</div>
<div class="slide" id="slide4" data-slide="4" >
<div data-stellar-ratio="0.7" data-stellar-vertical-offset="-450" id="ball1"></div>
<div data-stellar-ratio="2.6" data-stellar-vertical-offset="-350" id="ball2"></div>
<div data-stellar-ratio="0.9" data-stellar-vertical-offset="-230" id="ball3"></div>
<div data-stellar-ratio="2.9" data-stellar-vertical-offset="-380" id="ball4"></div>
<a class="button last" data-slide="1" title=""></a>
</div>
</body>
</html>