jQuery可以非常强大,并且随着您对它的更多了解,您会惊讶于它的功能。 今天的帖子是20个jQuery插件的集合,这些插件可在您的网站/博客上创建动画效果 。 它们可能非常有用,可以吸引新访客停留在您的页面上并降低跳出率,或者只是为了娱乐! 请享用。
1.光子:JS CSS 3D照明引擎
Photon是一个实验性JavaScript CSS 3D照明引擎。
源 演示
2. HoverTransitions – jQuery动画悬停效果
允许您为网页元素创建许多过渡动画效果。 通过将元素分解为较小的框并根据不同的图案和效果对每个框的外观进行动画处理来执行效果。
源 演示
3. forkit.js:动画的GitHub功能区
实验性的动画功能区显示出更多内容。 看到右上角! 演示。
源 演示
4.带有jQuery和CSS3的漂亮的闪光进度条
带有百分比标签的闪亮闪光进度栏。 使用线性渐变和径向渐变的组合作为背景来创建条形中的闪光,然后使用animation和keyframes属性对其进行动画处理。
来源+演示
5. JustGage:SVG和Raphaël库中的动画量规
一个方便的JavaScript插件,用于生成和动画漂亮而干净的量规。 它基于Raphaël库进行矢量绘制,因此完全独立于分辨率且可自我调整。
来源+演示
6 .: JZoopraxiscope
一个jQuery插件,用于从Eadweard Muybridge的Zoopraxiscope启发的静态图像制作动画。 除jQuery外,它还使用jQuery UI,并要求将帧动画为单个水平图像。
源 演示
7. Mac OS X Lion与CSS3和jQuery
本部分仅由CSS3关键帧动画组成。 登录部分主要包括一个时钟,两个图像(徽标和化身用户名),两个背景和一个密码输入字段。
源 演示
8.使用jQuery插入背景
在本教程中,我将向您简要介绍如何实际创建此幻灯片。
源 演示
9.使用jQuery和CSS3缩小共享按钮
我着手创建一种吸引注意力的方式来显示按钮,并提出了这个想法:一个扩大的圆圈显示出悬停时的一堆共享按钮。 请继续阅读以了解如何操作,并查看演示!
源 演示
10. jQuery flex
11. Gauge.js
100%原生且酷炫的动画JavaScript标尺。
来源+演示
12.使用jQuery和CSS3旋转功能框
它的完整效果(带有过渡动画)将在新的WebKit和Opera浏览器以及Firefox 4以上版本中起作用。 任何其他浏览器都将旋转块而没有过渡动画。
源 演示
13. ThumbFx:响应式jQuery缩略图效果
使用ThumbFx(一个jQuery动画插件)丰富您的网站体验,使您的图像和内容栩栩如生。 无需jQuery的任何知识即可轻松创建独特的动画效果。
源 演示
14. PullOuts:jQuery滑出小部件
允许从网页上抓取任何内容并将其显示为拉出小部件。 无论是文本,图像,购物车,登录,搜索或订阅表格,视频还是任何其他内容的块,您都可以将其设置为下拉列表。
源 演示
15.彩色动画jQuery插件
此插件还添加了rgba-colors,因此现在您可以独立设置背景和前景文本的透明度动画。 请注意,Internet Explorer 8和更早版本不支持rgba-colors。
来源+演示
16.带有jQuery的Mac OS X仪表板
这是Mac OS X仪表板的示例,该仪表板具有拖放图标,带有jQuery的3D翻转应用程序。 变形和过渡用于获得最佳效果。
源 演示
17. jQuery Sort and Order Portfolio插件
特征 :
>可扩展的过滤器和订购按钮。
>自定义CSS3驱动的动画,平滑降级。
>大约30种动画过渡样式,在easyIn和easeOut中有所不同。
>可选的反向顺序,您可以设置顺序按钮是否支持。
源 演示
18. CSS3和jQuery的水平条形图
今天,我们将使用jQuery,CSS3属性(例如:渐变,边界半径,rgba)和CSS3过渡创建动画的水平条形图。
源 演示
19. SeuratJS:Raphaël插件,用于精美的点动画
一个JavaScript库,扩展了Raphaël,并允许使用最少的代码创建生动的动画和像素化的艺术品。 它通过从您选择的图像中提取颜色数据并使用SVG中填充的图形基元重建原始图像来完成此任务。
来源+演示
20. JSTween:jQuery的JavaScript动画库
从头开始设计,以提高速度和精度,使其能够处理更多的同时动画,同时保持柔滑的帧速率。 通过触发play()方法,可以启动JSTween中的动画。
来源+演示
From: https://www.sitepoint.com/20-jquery-plugins-create-animating-image-effects/