非常酷的拖动图像小脚本ElastiStack-插件特效-星河码客

今天我们想分享一个小脚本,可以让你浏览一堆缩略图和一个弹性联系。想法来自这Dribbble上照片是由CreativeDash和互动基本上是拖着一个项目,它从堆栈中“释放”这似乎以一种无形的弹性连接。我们正在使用的拖拽功能大卫DeSandro Draggabilly来。HTML结构如下:

Saudade
Tuqburni
Retrouvailles
Onsra
Mamihlapinatapai
Koi No Yokan

当第一项拖,我们希望它反弹如果太接近了堆栈。这个距离可以定义变量distDragBack。时将物品消失的地区落入是设置为distDragMax定义的距离。拖动物品超出这个距离会自动释放项目从堆栈中,没有必要。这张图片展示了距离:这是如何初始化脚本:new ElastiStack( element, { // distDragBack: if the user stops dragging the image in a area that does not exceed [distDragBack]px // for either x or y then the image goes back to the stack distDragBack : 200, // distDragMax: if the user drags the image in a area that exceeds [distDragMax]px // for either x or y then the image moves away from the stack distDragMax : 450, // callback onUpdateStack : function( current ) { return false; }} );

非常酷的拖动图像小脚本ElastiStack

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»