stellar插件的使用





<!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>

你可能感兴趣的:(视差设计,stellar)