stellar插件的使用

最新推荐文章于 2023-08-18 09:26:03 发布
最新推荐文章于 2023-08-18 09:26:03 发布
阅读量566 收藏
点赞数
分类专栏： JavaScript 文章标签： stellar 视差设计
[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>
iteye_12132
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
stellar.js_使用Stellar.js创建视差滚动网站
Web design 教程小屋
07-08 728
最近的现代网页设计的最大趋势之一是使用视差滚动效果。 在本教程中，我将向您展示如何在自己的网站上创建效果，并需要一点想象力，并需要Stellar.js的帮助。 现代视差jQuery插件 有兴趣节省一些时间并确保您使用的是现代最佳实践吗？ Envato Market上有一个很棒的响应式jQuery滑块插件 ，可以完美地完成这项工作！ 它已经在超过150,000个网站上使用。 介绍 ...
Stellar插件
wow_tutou的博客
05-07 390
描述 视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。 这种效果可以给网站一个很好的补充。 特性 视差滚动效果酷炫，适合于个性展示的场合。 视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。...
视差滚动效果插件stellar.js
01-27
用于前端开发，视差滚动效果插件，background-attachment的一款好用插件
恒星「Stellar」-crx插件
03-08
将影响器配置文件固定到您的Stellar主板。 只需单击一个按钮，即可快速轻松地建立您的影响者网络。 使用Stellar Browser扩展程序，可以直接从Instagram，YouTube，Facebook，Twitter和Blogs将任何影响者个人资料保存到您的stellar帐户。 支持语言:English (UK)
Stellar.js插件实现视差滚动效果
weixin_43486035的博客
11-25 383
Stellar.js使用步骤 1.html部分，引入jquery.js文件，jquery.stellar.js文件 &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/jquery.stellar.js"&gt;&lt;/script&gt; 在要做视差滚动效果的背景添加data-stella...
基于jquery Stellar.js实现 网站视差滚动效果
zero________________的博客
05-20 2090
stellar.js是一个 jQuery插件，能很容易地给网站添加视差滚动效果。 虽然已经停止了维护，但它非常稳定，与最新版本的jQuery兼容。http://markdalgleish.com/projects/stellar.js/ 官网1.引用js 包&lt;script src="path/to/jquery/jquery.min.js"&gt;&lt;/script&gt; &lt;...
视差滚动效果Stellar.js使用教程(jQuery)
小菜鸟的Blog
03-03 2715
什么为视差滚动效果看看下面这个网站http://www.sosglobal.eu/en/，是否觉得很熟悉呢？逛外国网站经常可以看到这个效果，接下来我们就来看看基于jQuery的Stellar插件实现视差滚动效果。Stellar.js是一款基于jQuery的插件，专业提供视差滚动效果30年，值得信赖。使用方法如下： 第一步，为元素对象添加 .stellar() 效果函数：// 例如： $(windo
专注网格剖分 - TetGen,NETGEN,Steller
weixin_34144848的博客
08-29 1003
提要 记得大三那一年有一门课叫做高等有限元，最后的作业就是网格剖分算法的实现，我和同学一起花了些时间做了一个Qt程序，他写算法，我写界面，最后成绩竟然出奇的拿了90多... 今天要介绍的这款软件TetGen就是一款网格剖分的软件，算是力学计算中的前处理,他能够将输入的三维模型剖分成一个个的单元，如下图： 最左边...
精美的jQuery视差效果图片轮播插件
08-23
今天让我们给大家分享一款基于jQuery的视差效果的图片轮播插件，它与一般的jQuery焦点图插件相比，并不是图片之间的切换，而是各种网页元素悬浮在一张大背景图上，切换时背景逐渐移动，另外背景上的元素也会跟着切换，与之类似的还有一款jQuery视差效果的焦点图插件。
jquery.stellar.min.rar
02-25
jquery.stellar.min.js 视差滚动效果常用于全屏网页 其核心原理利用元素和背景以不同的速度移动,以实现视差滚动效果主要通过background-attachment=`fixed`属性实现
stellar.js
10-10
一种html5视觉差滚动效果的js，用起来很简单。Stellar.js
stella 基本操作教程
11-06
STELLA操作教程-来自网络 使用 STELLA 可以: • 长时间做系统仿真 • 将理论同现实世界连接在一起 • 让学生们创造性地改变系统 • 教授学生如何寻找关系——从大局出发 • 清楚地理解系统输入和输出同时展示输出结果
Stellar.js 使用方法
第7维度 - 日常笔记
08-04 3568
下载好后，在页面中引用： 完成后，开始给页面添加视觉差滚动效果。 这个插件允许将效果添加到任何滚动的元素，例如window对象，或者其他元素。 要使用jQuery的选择器选中所需要的元素，在绑定stellar()方法即可。 $('#someElement').stellar(); 对于window对象可以用下面的方法（网页就用此方法）：
stellar视差插件
weixin_30569001的博客
10-15 179
stellar视差插件 ​ 视差滚动指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。主要核心就是前景和背景以不同速度移动，从而创造出3D效果。利用background-attachment属性实现。stellar.js是一个jQuery插件，能很容易地给网站添加视差滚动效果。以下介绍stellar的简单使用： 1.引...
使用SIMD完成StellarSim的性能优化
Fallen250的博客
08-18 132
StellerSim 是一个基于离散单元数值计算的物理演化程序，该算法最早从天体动力学星云演化计算中产生，被广泛用于游戏开发引擎中的物理演化、碰撞事件、特效生成等等模块。该程序采用C++语言，完整计算了一个粒子发生器引擎模块膨胀与坍缩效果，粒子发生器被广泛用于unity、 Unreal等著名游戏物理引擎软件。通过天气物理学领域的数值模拟科学计算软件，来熟悉对串行。使用64线程进行提交后，运行时间为 3.63 s，加速比为 136.9，效果显著。软件进行并行性能优化的基本方法与步骤。headers 目录。
jquery Stellar.js实现 网站视差滚动效果
易之晓的博客
03-20 396
stellar.js是一个 jQuery插件，能很容易地给网站添加视差滚动效果。 虽然已经停止了维护，但它非常稳定，与最新版本的jQuery兼容。 http://markdalgleish.com/projects/stellar.js/ 官网 1.引用js 包 <script src="path/to/jquery/jquery.min.js"></script&g...
JQuery stellar视察滚动 和 fullPage 全屏滚动插件的使用
qq_43512502的博客
04-06 361
Stellar.js(视差滚动是当用户滚动页面时，前景和背景以不同的速度移动，从而创造出3D效果。 这种效果可以给网站一个很好的补充，但如果滥用，就会很烦人。 有些完全由这种效果驱动的网站会让人觉得不优雅。 因为这种效果通常使用大图像做背景，网站资源大量增加，导致加载非常缓慢。http://markdalgleish.com/projects/stellar.js/ 官网) 引用 css js包...
Stellar.js视察滚动插件
娃娃的博客
04-19 440
目录 视差滚动插件 特性 原理 Stellar.js是什么？ 引用 js包 引用html 引入CSS js调用函数 详细参数 视差滚动插件 视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术 主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。 这种效果可以给网站一个很好的补充。 ...
stellar video repair 下载
最新发布
12-24
Stellar Video Repair是一款功能强大的视频修复软件，可以帮助用户修复因各种原因损坏的视频文件。你可以通过以下步骤来下载和安装Stellar Video Repair： 首先，打开你的网络浏览器，搜索“Stellar Video Repair下载”并进入官方网站。 其次，在官方网站上找到Stellar Video Repair软件的下载页面，点击下载按钮。 接着，根据你的操作系统选择合适的版本，比如Windows或者Mac版本，然后点击下载按钮。 下载完成后，找到下载的安装文件，双击运行安装程序。跟随安装向导的指示完成软件的安装。 安装完成后，打开Stellar Video Repair软件，按照软件界面的提示操作即可修复你的损坏视频文件。 需要注意的是，Stellar Video Repair软件可能需要付费购买或者试用，具体请根据官方网站提供的信息进行选择。 总的来说，Stellar Video Repair是一款非常实用的视频修复工具，可以帮助你轻松修复损坏的视频文件，非常值得一试。希望以上信息能够帮助你成功下载并使用Stellar Video Repair软件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值