网站地图 | 联系我们 赣州网站建设 赣州做网站 赣州网站制作 赣州网站优化
你现在的位置:网站首页 > 资源分享 > JS插件 > 正文内容


好玩的交互可拖动(JQ+CSS3)

发布时间:2015-08-14 | 编辑 : 小勇 | 分类 : JS插件 | 阅读: 次 | 评论 :0

ElasticDraggingInteraction

查看演示 下载源码 提取密码: b48f

今天,我们想与你分享两个小有趣互动实验。 第一个是灵感来自互动的集会 上拍摄 。 我们想创建一个好玩的拖动交互,将变形和动画元素根据其位置。 如果拖到外面定义的界限,我们将把元素( 演示1 ),或浏览一个画廊( 演示2 )。 如果范围下降之前我们会提前元素用一个弹性的效果。 我们还添加了一些反弹能力从来都是不利的,内部的元素,一切都变得更加有机的感觉。

注意: 这个实验使用了一些CSS属性,不会在老式浏览器工作(CSS动画,CSS过滤器,等等)。Internet Explorer 11既不支持 传输格式:preserve-3d 也没有CSS过滤器。

我们使用的是 Draggabilly 再加上 imagesLoaded 和 Dynamic.js

当拖动相应的元素,我们“变形”,这样我们添加一些深度互动的感觉。 在 第一个演示 我们使用一个对话框,在这里我们有生命的内在元素拖放到让它反弹时的链接。 的 第二个例子 是一个画廊,我们导航,当拖动当前图像的边界(向左或向右)。 变成了一个形象  可选的转换(如缩放或旋转)或过滤器。

这种效应的有趣的部分工作是在变形的计算转换。 鉴于一定距离我们希望转换或过滤增加比例。得到正确的值,我们需要找到合适的映射函数,给定一个点在二维空间,返回相对变换或过滤值。

所以我们要做的就是解决一个线性函数。 鉴于两点坐标系统中,我们把我们的距离函数,给定一个x,我们得到我们的y值。 让我们来做一个例子,一个元素集中在页面上,降低不透明度时,移动到的页面。 我们的距离是一半的窗口宽度: ww / 2 。 我们的不透明度值范围在0和1之间。 完全不透明的中心元素和页面。 零不透明度达到当达到页面的边缘,因此 ww / 2 远离原点。 这给了我们两个点P1和P2(x1,y1)(x2,y2): P1(0,1) 和 P2(ww / 2 0) :

DraggableElementInteraction_1

我们可以与这两个点 线性函数 这样的:

f(x)= y =((y2 - y1)/(x2 - x1))* x + b

我们知道, 1,y轴的十字路口。 当我们解决这个使用两个点,然后我们有:

f(x)= y = x + 1(2 / ww)*

这个函数将给定距离x,y返回所需的透明度水平。
同样的原理适用于过滤值(只使用0%和100%的值为y1和y2)或任何其他财产你想按比例变化。
我们希望你喜欢这个小实验,发现它鼓舞人心!

本文标签CSS   JS  

赞助我们:如果你觉得本站的内容对你确实有所帮助,请赞助我们让我们有动力为你继续奉献更多有用的内容→赞助我们

版权说明:如非注明,本站文章均为 小勇工作室 原创,转载请注明出处和附带本文链接 http://www.yl0797.com/html/2015/jq_0814/1.html。


联系我们
QQ:
873268813
旺旺:
wsuper勇
邮箱:
给我发邮件
QQ群:
加入交流群

Powered By 小勇工作室,Copyright www.yl0797.com © 2008-2018, 赣ICP备15004575号