`
mutongwu
  • 浏览: 447529 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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>
  • 大小: 1.1 MB
分享到:
评论

相关推荐

    视差滚动效果插件stellar.js

    用于前端开发,视差滚动效果插件,background-attachment的一款好用插件

    前端开源库-stellar-fw

    4. **社区支持**:作为开源项目,stellar-fw拥有活跃的开发者社区,提供了丰富的插件和扩展,以及详尽的文档和示例,便于学习和问题解决。 **二、stellar-fw的主要组件** stellar-fw包含多个关键组件,这些组件...

    恒星电动工具「Stellar Power Tools」-crx插件

    在浏览器上显示恒星(XLM)当前价格作为徽章。点击右键将选定的文本发送给恒星区块链...在浏览器上以徽章的形式显示Stellar(XLM)的当前价格。 右键单击以将选定的文本发送到恒星区块链资源管理器 支持语言:English

    Stellar Power Tools-crx插件

    在浏览器上以徽章的形式显示Stellar(XLM)的当前价格。 右键单击以将选定的文本发送到恒星区块链资源管理器 在浏览器上以徽章的形式显示Stellar(XLM)的当前价格。 右键单击以将选定的文本发送到恒星区块链资源...

    恒星「Stellar」-crx插件

    将影响器配置文件固定到您的Stellar主板。...使用Stellar Browser扩展程序,可以直接从Instagram,YouTube,Facebook,Twitter和Blogs将任何影响者个人资料保存到您的stellar帐户。 支持语言:English (UK)

    超好用的Jquery插件集合

    4. **Parallax Scrolling** - 插件如stellar.js,使背景图片随滚动条移动,创造出深度感和动态效果。 5. **Responsive Image Grids** - 如Masonry或Isotope,能自适应屏幕尺寸,创建美观的瀑布流布局。 6. **Image ...

    Stellar (XLM) Price Tracker-crx插件

    语言:English Stellar(XLM)的价格跟踪器-使用coinmarketcap API收集价格数据 简单的扩展即可跟踪Stellar(XLM)的价格。 使用提供的公共API coinmarketcap.com-每分钟更新一次。 支持APIf可用的所有货币

    Ad Stellar-crx插件

    Ad Stellar将帮助您在新闻Feed中仅查看Facebook广告,并收集它们以供您自己研究。极其简单易用!免责声明:--------------------我们对您如何使用此工具不承担任何责任。它只是使您可以轻松手动完成的事情自动化。_...

    简约响应设计管理后台bootstrap模板-Stellar

    此外,"Stellar"还可能提供了一些高级特性,如图表库(例如Chart.js或Highcharts)用于数据可视化,或者集成了一些常见的JavaScript插件,如日期选择器(Datepicker)、时间选择器(Timepicker)和表单验证工具,以...

    科幻星际刺客模型:Stellar Rogue Sci-Fi Characters 1.0

    骨骼绑定在Maya中完成,无需插件且不带控制器。 该角色的骨骼绑定已通过各种动画测试,包括: ALSv4 第三人称标准动画 女性互动动画 动作捕捉库 ARLS + 马匹动画集 魅魔动画集 古老山谷 近战:剑士 Lyra启动游戏 ...

    jQuery插件.zip

    5. **滚动效果插件**:如`stellar.js`,可以实现页面滚动时元素的平滑定位和视差效果,增加网站的视觉吸引力。 6. **日期和时间选择器插件**:如`datetimepicker`,为用户提供方便的日期和时间选择界面。 7. **...

    10个优秀视差滚动插件

    下面我们将深入探讨10个优秀的视差滚动插件,并了解它们的特点和应用场景。 1. **ScrollPath** ScrollPath是其中一个插件,它允许开发者通过SVG路径定义元素的滚动动画轨迹。这个插件非常灵活,可以创建复杂的运动...

    Stellar Photos-crx插件

    在您的浏览器选项卡中使用Unsplash拍摄的精美照片-可以免费下载和使用。 特点:-每次打开新标签时,都享受一张新的高分辨率照片-完全免费用于个人或商业用途,无需注明出处。 -将您喜欢的照片下载到计算机上,或将其...

    3D-stellar-webpack.zip

    "stellar-webpack-master"这个文件名暗示了这可能是一个关于星际或宇宙主题的3D项目,且可能使用了Webpack工具进行模块打包。Webpack是一个流行的JavaScript模块打包器,它能将各种源文件转换、组合,并打包成适合...

    恒星的照片「Stellar Photos」-crx插件

    您可以在浏览器标签中从Unsplash拍摄精美的照片-可以免费下载和使用。 特点:-每次打开新标签时,都享受一张新的高分辨率照片-完全免费用于个人或商业用途,无需注明出处。 -从Unsplash搜索免费的高分辨率照片,然后...

    Stellar Toolkit for Data Recovery 11.0.0.0

    Stellar Toolkit for Data Recovery 11.0.0.0 Full是一款专业的数据恢复软件套装,它可以帮助用户恢复误删除、格式化、病毒感染、硬盘损坏等情况下丢失的各种数据。该套装包含多个独立的软件模块,涵盖了从Windows、...

    Stellar Lumens Hoje-crx插件

    语言:português (Brasil) 通过dolarheje.com/stellar-lumens-hojeja/po&gt; _p&gt;应用dolarhoje.com/stellar-lumens-hoje的应用程序来计算恒星内腔引用,而无需外部计算器或纸张。 :)

    恒星流明今天「Stellar Lumens Hoje」-crx插件

    通过DolarHoje.com/stellar-lumens-hoje查看Stellar Lumens的报价 Aplicaçãodo DolarHoje.com/stellar-lumens-hoje可为您提供出色的星状流星雨装饰,也可以作为uma calculadora的必备品,也可以用作纸浆 :) 支持...

    jquery滚动插件,各种样式的都有.zip

    7. **响应式滚动**:考虑到现代网页设计的响应式需求,许多jQuery滚动插件如`stellar.js`支持响应式布局,能根据设备屏幕大小调整滚动效果,确保在不同设备上都能良好运行。 8. **性能优化**:为了确保性能,一些...

Global site tag (gtag.js) - Google Analytics