10款web前端实现超炫的元素运动效果

1.ScrollReveal.js 帮助你实现超炫的元素运动效果

ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力。只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置好的动画

在线演示

源码下载

2.Slip.js 在触摸屏上实现列表的滑动排序功能

Slip.js 是一个很小的 JavaScript 库,用于实现对触摸屏的互 Swipe 和对元素重新排序列表(Reordering)。Slip.js 没有任何的依赖,你可以通过自定 DOM 事件实现重新排序交互

在线演示

源码下载

3.Planetary.js:帮助你构建超炫的互动球体效

Planetary.js 是一 JavaScript 库,用于构建互动球体效果。它使用 D3 TopoJSON 解析和渲染地理数据。Planetary.js 采用了基于插件的架构,即使是默认的功能是作为插件实现的,这使 Planetary.js 非常灵活。Planetary.js 是完全可定制,包括颜色,旋转等等

在线演示

源码下载

4.Croppic 免费开源的 jQuery 图片裁剪插件

Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要。只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能。因为使用了 HTML5 FormData 对象,所以目前只支持 IE 10+、Chrome Firefox 等现代浏览器

在线演示

源码下载

5.Vex 超轻量!可以轻松自定义的现代风格弹窗插件

Vex 的独特之处在于现代风格设计,能够自定义弹出模式、皮肤。Vex 超轻量,压缩后不 2KB,提供了简洁的 API,可以根据自己的项目需要快速自定义。支持在移动设备上使用,测试通过的浏览器:IE8+,Firefox,Chrome,Safari Opera

在线演示

源码下载

6.Voix.js 使用声音来控制和操纵你的网站

我们通常使用鼠标和键盘(在移动端使用触摸)来操作网站,如 Voix.js 能够让我们使用声音控制网站,很酷吧?它可以启动和停止侦听麦克风,在检测到一个给定的关键字时触发绑定的特定事件。Voix.js 使用很简单,不过目前只支 Chrome 浏览器

在线演示

源码下载

7.Magnifier.js 支持鼠标滚轮缩放的图片放大镜效果

Magnifier.js 是一 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放 缩小功能。放大的图像可以显示在镜头本身或它的外部容器中。Magnifier.js 使用Event.js 作为跨浏览器的事件处理器

在线演示

源码下载

8.Sortable 简单灵活的 JavaScript 拖放排序插件

当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案。今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 原生的拖 API 来实现拖放,并支持在触屏设备上使用

在线演示

源码下载

9.类似 Google Tips 页面的卡片式提示和翻转特

这款 jQuery 插件用于实现类似 Google Tips 页面的卡片式提示和翻转的交互特效。你可以根据自己的需要定制动画效果参数,定义回调函数来控制行为。因为使用了 CSS3,所以只支持 Chrome、Firefox、和 Safari 等现代浏览器

在线演示

源码下载

10.Hover.css:一组超实用 CSS3 悬停效果和动

Hover.css 是一套基 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签,必要的时候使 before after 伪元素。因为使用了 CSS3 过渡、转换和动画效果,因此只支持 Chrome、Firefox Safari 等现代浏览器

在线演示

源码下载

未经允许不得转载:爱前端网 » 10款web前端实现超炫的元素运动效果

赞 (0) 打赏


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏