stellar插件的使用

mutongwu

浏览: 450503 次
性别:
来自: 广州

最近访客更多访客>>

lxswfc

xjg9083

oszerone

micai_1234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

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-example.zip (754.5 KB)
下载次数: 0

查看图片附件

分享到：

skrollr-视差滚动动画插件 | 四个方向鼠标滑入的css动画

2015-05-18 17:30
浏览 1812
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

stellar插件的使用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

stellar插件的使用

评论

发表评论

相关推荐

webpack简单打包PC网站前端资源

grunt构建基于seajs的网站实现

js平滑滚动回到顶部

fis-amd 的使用与修改

scrollMagic 视差与滚动动画GSAP

skrollr-视差滚动动画插件

icon font VS svg font

gulp下静态资源的合并、压缩、MD5后缀

DOMContentLoaded VS onload VS onreadystatechange

简单的css3全屏滚动

jquery插件treetable 的使用

sublime 侧边栏字体大小修改

移动端的“点透”问题

scheme缺少,ie的bug

大整数相加

getBoundingClientRect 跨浏览器实现

window.name 跨域

window.name 跨域

HTML History API

Emberjs学习

最近访客更多访客>>