20个jQuery插件来创建动画图像效果

jQuery可以非常强大,并且随着您对它的更多了解,您会惊讶于它的功能。 今天的帖子是20个jQuery插件的集合,这些插件可在您的网站/博客上创建动画效果 。 它们可能非常有用,可以吸引新访客停留在您的页面上并降低跳出率,或者只是为了娱乐! 请享用。

1.光子:JS CSS 3D照明引擎

Photon是一个实验性JavaScript CSS 3D照明引擎。
光子
演示

2. HoverTransitions – jQuery动画悬停效果

允许您为网页元素创建许多过渡动画效果。 通过将元素分解为较小的框并根据不同的图案和效果对每个框的外观进行动画处理来执行效果。
悬停过渡
演示

3. forkit.js:动画的GitHub功能区

实验性的动画功能区显示出更多内容。 看到右上角! 演示。
forkit.js
演示

4.带有jQuery和CSS3的漂亮的闪光进度条

带有百分比标签的闪亮闪光进度栏。 使用线性渐变和径向渐变的组合作为背景来创建条形中的闪光,然后使用animation和keyframes属性对其进行动画处理。
漂亮的闪光进度条
来源+演示

5. JustGage:SVG和Raphaël库中的动画量规

一个方便的JavaScript插件,用于生成和动画漂亮而干净的量规。 它基于Raphaël库进行矢量绘制,因此完全独立于分辨率且可自我调整。
正义规
来源+演示

6 .: JZoopraxiscope

一个jQuery插件,用于从Eadweard Muybridge的Zoopraxiscope启发的静态图像制作动画。 除jQuery外,它还使用jQuery UI,并要求将帧动画为单个水平图像。
JZoopraxiscope
演示

7. Mac OS X Lion与CSS3和jQuery

本部分仅由CSS3关键帧动画组成。 登录部分主要包括一个时钟,两个图像(徽标和化身用户名),两个背景和一个密码输入字段。
Mac OS X Lion
演示

8.使用jQuery插入背景

在本教程中,我将向您简要介绍如何实际创建此幻灯片。
滑入式背景
演示

9.使用jQuery和CSS3缩小共享按钮

我着手创建一种吸引注意力的方式来显示按钮,并提出了这个想法:一个扩大的圆圈显示出悬停时的一堆共享按钮。 请继续阅读以了解如何操作,并查看演示!
缩小分享按钮
演示

10. jQuery flex

流体不对称动画网格插件。
jQuery Flex
演示

11. Gauge.js

100%原生且酷炫的动画JavaScript标尺。
Gauge.js
来源+演示

12.使用jQuery和CSS3旋转功能框

它的完整效果(带有过渡动画)将在新的WebKit和Opera浏览器以及Firefox 4以上版本中起作用。 任何其他浏览器都将旋转块而没有过渡动画。
旋转功能框
演示

13. ThumbFx:响应式jQuery缩略图效果

使用ThumbFx(一个jQuery动画插件)丰富您的网站体验,使您的图像和内容栩栩如生。 无需jQuery的任何知识即可轻松创建独特的动画效果。
ThumbFx
演示

14. PullOuts:jQuery滑出小部件

允许从网页上抓取任何内容并将其显示为拉出小部件。 无论是文本,图像,购物车,登录,搜索或订阅表格,视频还是任何其他内容的块,您都可以将其设置为下拉列表。
拉出式
演示

15.彩色动画jQuery插件

此插件还添加了rgba-colors,因此现在您可以独立设置背景和前景文本的透明度动画。 请注意,Internet Explorer 8和更早版本不支持rgba-colors。
彩色动画jQuery插件
来源+演示

16.带有jQuery的Mac OS X仪表板

这是Mac OS X仪表板的示例,该仪表板具有拖放图标,带有jQuery的3D翻转应用程序。 变形和过渡用于获得最佳效果。
Mac OS X仪表板
演示

17. jQuery Sort and Order Portfolio插件

特征 :
>可扩展的过滤器和订购按钮。
>自定义CSS3驱动的动画,平滑降级。
>大约30种动画过渡样式,在easyIn和easeOut中有所不同。
>可选的反向顺序,您可以设置顺序按钮是否支持。
jQuery排序和顺序
演示

18. CSS3和jQuery的水平条形图

今天,我们将使用jQuery,CSS3属性(例如:渐变,边界半径,rgba)和CSS3过渡创建动画的水平条形图。
水平条形图
演示

19. SeuratJS:Raphaël插件,用于精美的点动画

一个JavaScript库,扩展了Raphaël,并允许使用最少的代码创建生动的动画和像素化的艺术品。 它通过从您选择的图像中提取颜色数据并使用SVG中填充的图形基元重建原始图像来完成此任务。
瑟拉特
来源+演示

20. JSTween:jQuery的JavaScript动画库

从头开始设计,以提高速度和精度,使其能够处理更多的同时动画,同时保持柔滑的帧速率。 通过触发play()方法,可以启动JSTween中的动画。
JSTween
来源+演示

From: https://www.sitepoint.com/20-jquery-plugins-create-animating-image-effects/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值