stellar插件的使用

最新推荐文章于 2024-09-26 08:02:50 发布

最新推荐文章于 2024-09-26 08:02:50 发布 · 646 阅读

文章标签：

#stellar #视差设计

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了一个使用Parallax技术创建滚动效果的网站实例。通过调整不同元素的移动速度，实现了丰富的视觉层次感。文章详细展示了如何利用jQuery插件及CSS属性来控制页面元素随滚动而产生的动态位移。

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