html轮播图循环效果,TremulaJS-跨设备多功能的无限循环js轮播图插件
TremulaJS是一款非常酷的跨设备多功能的无限循环js轮播图插件。TremulaJS是一个客户端javascript UI组件,它基于贝兹曲线和物理动量效应制作各种效果,可以制作无限循环的图片流,图片瀑布流,旋转木马特效等。TremulaJS适用于桌面和移动触摸设备。
TremulaJS由5个部分组成:滚动轴(Scroll Axis)、动量循环(Momentum Loop)、内容网格(Content Grid)、内容模型(Content Box)和网格投影(Grid Projection)。
滚动轴
TremulaJS可以制作各种视觉效果,但是它可以在两个方向上滚动,这些值封装在 Scroll Axis 对象中,该对象用于管理水平和垂直方向上的滚动。
动量循环
动量循环(momentum loop)用于调节系统的动量值。它是各种子组件输出的总和,包括:一个内部时钟的动量,各种条件控制功能与滚动轴状态和用户交互事件处理程序。在每一个动画帧它都会返回一个瞬时的动量值,用于计算滚动偏移的位置。
内容网格
内容网格是一个可配置的XY网格抽象模型的虚拟内容模型。所有添加到网格中的内容都会沿十字轴坐标系按比例缩放,以便于管理行或列的坐标。
在每一个动画帧,动量移动沿十字轴移动到一个新的位置,内容网格会使用一个新的相对位置来更新它的子内容模型。
内容模型
内容模型用于为内容网格添加内容。内容模型有宽度,高度和一个可选的HTML模板,以及一个图片占位。
每一个内容块也保持各种原始波形值对应于它自己的屏幕上滚动的进程。这些波形值可以映射出一个内容模型DOM元素在时间和空间上的任何动画状态。
在上图中,一个牛肉块从屏幕的左边移动到右边,它的每一个位置都对应一个梯度波形值,我们可以使用一个函数来映射它,在函数中使用CSS translateX()属性来更新每一个运动状态的值。
然而上面所说的并不是默认的行为,默认的行为要更复杂一些。下面是一个在内容模型的一个动画周期内调用的默认函数的简单代码:
function updateContentBoxElementProperites(x,y) {
var ramp = this.waveforms.headRamp,
xo=x,
yo=y,
zo=0;
this.e.style.transform = 'translate3d(' + xo + 'px,' + yo +'px, ' + zo + 'px)';
//this.e.style.opacity = ramp;
this.pPos = [x,y];//cache the current position in the Content Box model
}
这个函数会在内容模型改变位置的时候被调用,它传入了新的坐标系。X和Y都是绝对定位的,这些值是给内容网格使用,它们带有内容块的信息,它们能处理所有网格上内容模型的所有位置信息。上面的函数会在每一个动画帧中每一个内容模型中调用。
网格投影
延续上边的例子,内容模型函数会在每一个动画帧中被执行。这个函数会传入瞬时的X和Y坐标值,另外,它还会为滚动线程传入一些原始的波形值,这时候,我们可以为它映射任意的贝兹曲线和CSS属性。接着上边的例子,我们要使用贝兹曲线来沿垂直方向移动内容模型的位置。
var bezierArcPath = [
{x:0,y:0},
{x:0,y:1},
{x:1,y:1},
{x:1,y:0}
];
function updateContentBoxElementProperites(x,y,env) {
var path = bezierArcPath;
var
areaX = env.viewDims[0],
areaY = env.viewDims[1],
ramp = this.waveforms.tailRamp,
xo=x,
yo=y,
zo=0;
var xyFactor = [
areaX,
areaY
];
var scaledPath = env.factorPathBy(path,xyFactor);
var p = jsBezier.pointOnCurve(cubicBezier, ramp);
var g = jsBezier.gradientAtPoint(cubicBezier, ramp);
xo = p.x - (this.dims[0]*.5);
yo = areaY - p.y - (this.dims[1]*.5);
zo = 0;
this.e.style.transform = 'translate3d(' + xo + 'px,' + yo +'px, ' + zo + 'px)';
this.pPos = [x,y];
}
在这个例子中使用了一些额外的方法来实现贝兹曲线效果。首先观察env.factorPathBy(path,xyFactor),它允许我们创建弹性内容区域(内容拖到容器边界时的回弹效果),并且在两个方向上缩放内容以适应模型的大小。它将返回一个可使用的坐标系。
接下来是jsBezier.pointOnCurve(cubicBezier, ramp),它使用贝兹曲线和斜坡输出值作为参数。它会返回转换后的X和Y值。
html轮播图循环效果,TremulaJS-跨设备多功能的无限循环js轮播图插件相关推荐
- 旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
- linux系统一直循环登录界面,Ubuntu卡在登陆界面无限循环的问题
某次虚拟机Ubuntu18开机之后,点击用户名输入密码,屏幕一闪接着又返回用户登录界面,无限次循环,已经不是第一次了,第一次的时候直接重装了虚拟机,但是这次虚拟机中有重要的文件,不能进行重装,仔细回想 ...
- python多线程处理循环_在python中使用线程运行无限循环
据我了解你的问题,你有两个不同的任务,你希望他们连续执行.现在关于你的问题:我该如何运行两个无限循环? 您可以创建两个不同的线程来为您运行这些无限循环.第一个线程将执行您的task1,第二个线程将执行 ...
- html背景图片循环自动播放,CSS动画实现背景无缝无限循环的实现示例
1. 需求 一张图片从左向右无限循环移动 2. 代码 由于是应用在移动端,故使用rem单位,后面问题也发生在这. HTML CSS .dog { width: 5.4rem; \\图片宽度 heigh ...
- java 实现雷达图,如何使用y轴为0到100的chart.js创建雷达图?
我目前正在使用Chart.js将我的数据显示为雷达图 . 我面临的问题是,每次我向页面添加数据时,它都会将最大值设置为表中最高值 . 我需要它从0到100的Y轴开始 . 我正在使用Chart.js v ...
- 无限循环python代码_python - 代码遇到意外的无限循环? - SO中文参考 - www.soinside.com...
调试(使用ipython): In [2]: s = 'asdfasdf asdf asdf asd sdfa' In [4]: def count_words(sentence): ...: cou ...
- 利用jQuery实现图片无限循环轮播(不借助于轮播插件)
原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...
- Cocos2dx-背景无限循环播放
本文转载于:http://www.cnblogs.com/zisou/p/cocos2d-xARPG6.html 首先让大家知道我们想要实现的最终效果是什么样的? 看一个<逆天仙魔录>例子 ...
- android开发实例之viewpager无限循环+自动滚动,Android ViewPager实现无限循环的实例...
Android ViewPager实现无限循环的实例 ViewPager自身并不支持左右无限循环的功能,这里就提供一种方案让Android ViewPager实现左右无限循环的功能,这里记录下: 用于 ...
最新文章
- java课堂测试样卷-----简易学籍管理系统
- 删除数组中指定元素_如何删除PHP数组元素键值并重新排序
- Java 基础 之 三目运算
- ssl2293-暗黑游戏【dp练习题】
- Spring 事务 以及拦截器的前后关系实验 Mybatis 日志拦截
- java 栈空间_初学JAVA——栈空间堆空间的理解
- 如何生成 Flink 作业的交互式火焰图?
- Zeppelin 可视化操作spark sql
- Python菜鸟入门:day12编程学习
- 计算机学院军训条幅,最新各大高校欢迎新生横幅,确认过眼神,师兄师姐Skr人才。...
- 管理感悟:人才如何分级
- 免费主机,免费二级域名分发,免费建临时网站,免费扒网
- PCL中点云配准精通级实例解析
- windows/vs如何获取程序内存使用量和时间花费
- 流利阅读 2019.1.23 Tech industry expo opens portal to tomorrow
- 黎曼和 Riemann Sum ,黎曼积分Riemann Integral,正态分布normal distribution
- 史上最全——QQ秘籍之全攻略
- Mini MP3 Player模块无法正常播放
- 为什呢vue组件中的data必须是函数?
- 要不是这个沙雕网站,我这辈子都见不到这么多沙雕网站!
热门文章
- 安卓万能播放器aar
- 干货|BAT物联云IoT协议例析
- 今天遇到res\layout\activity_easy_bid.xml.r8010:0: error: Resource entry activ
- 专业移动GIS软件开发工具--mattermap
- Cubase Elements 11.0.40 WiN 元素完整版编曲录音软件下载
- ORB—点局部特征原理
- php 积分商城_积分商城 - 基于ThinkPHP和FastAdmin开发的积分商城系统 – 基于ThinkPHP和Bootstrap的极速后台开发框架...
- 【Latex】Latex文档追踪修改痕迹
- 诺基亚近日宣布,60年来首次更改其标志Logo,使用全新标志。
- ValueError: GetLogdirSubdirectories: path exists and is not a directory