全国服务热线:4008-888-888

行业新闻

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

ElasticDraggingInteraction

查询演试 免费下载源代码 获取登陆密码: b48f

今日,大家想与你共享2个小趣味互动交流试验。 第一个是设计灵感来源于互动交流的聚会 上拍攝 。 大家想建立一个好玩儿的拖拽互动,将形变和动漫原素依据其部位。 假如拖至外边界定的界线,大家将把原素( 演试1 ),或访问一个画苑( 演试2 )。 假如范畴降低以前大家会提早原素用一个延展性的实际效果。 大家还加上了一些反跳工作能力几乎全是不好的,內部的原素,一切都越来越更为有机化学的觉得。

留意: 这一试验应用了一些CSS特性,不容易在旧式访问器工作中(CSS动漫,CSS过虑器,这些)。 Explorer 11既不兼容 传送文件格式:preserve-3d 都没有CSS过虑器。

大家应用的是 Draggabilly 加上上 imagesLoaded 和 Dynamic.js。

当拖拽相对的原素,大家 形变 ,那样大家加上一些深层互动交流的觉得。 在 第一个演试 大家应用一个会话框,在这里里大家有性命的本质原素拖拽到让它反跳时的连接。 的 第二个案子 是一个画苑,大家导航栏,当拖拽当今图象的界限(向左或向右)。 变为了一个品牌形象 可选择的变换(如放缩或转动)或过虑器。

这类效用的趣味的一部分工作中是在形变的测算变换。 由于一定间距大家期待变换或过虑提升占比。获得恰当的值,大家必须寻找适合的投射涵数,给定一个点在二维室内空间,回到相对性转换或过虑值。

因此大家要做的便是处理一个线形涵数。 由于二点座标系统软件中,大家将我们的间距涵数,给定一个x,大家获得大家的y值。 要我们来做一个案子,一个原素集中化在网页页面上,减少不全透明度时,移动到的网页页面。 大家的间距是一半的对话框总宽: ww / 2 。 大家的不全透明度值范畴在0和1中间。 彻底不全透明的管理中心原素和网页页面。 零不全透明度做到当做到网页页面的边沿,因而 ww / 2 杜绝原点。 这给了大家2个点P1和P2(x1,y1)(x2,y2): P1(0,1) 和 P2(ww / 2 0) :

DraggableElementInteraction_1

大家能够与这2个点 线形涵数 那样的:

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

大家了解, b 1,y轴的十字街口。 当我们们处理这一应用2个点,随后大家有:

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

这一涵数将给定间距x,y回到需要的全透明度水准。
一样的基本原理可用于过虑值(只应用0%和100%的数值y1和y2)或一切别的资产你要按占比转变。
大家期待你喜爱这一小试验,发觉它鼓励内心!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服