jquery 背景特效实现_「网络特效」12 个炫酷背景特效库

1.particles-bg

地址:https://github.com/lindelof/particles-bg

效果:

8badb575cc077cff50ca0a1b22dda531.png
53a966fda9c35f147b5d964a9326836b.png

2.particles-bg-vue

地址:https://github.com/lindelof/awesome-web-effect

这是一个基于VUE的粒子动画组件。

f351e29ed5ff15acb9406e6f6eb0377a.png
8a61729a593bd861df281b7c25f4b194.png

3.jquery.ripples

地址:https://github.com/sirxemic/jquery.ripples

jQuery Ripples 插件向HTML添加一层水元素将波纹光标与WebGL的互动。您可以使用这种效果,让你的静态CSS背景图像更多的互动。

57ce031bd2ad8ec47570ac6a1a14b623.png

4.MorphingBackgroundShapes

地址:https://github.com/codrops/MorphingBackgroundShapes

这是一个很具装饰性的网站背景效果,当用户在滚动到某一页面后此背景的SVG图形将随着变形和移动。

1b4eda5b2e26fedba4bb176fe8e9b9bc.gif

5. SegmentEffect

地址:https://github.com/codrops/SegmentEffect

背景分割装饰特效。

8f19ecf71c2dd75651186e9f4e1adfba.gif

6.jQuery.BgSwitcher

地址:https://github.com/rewish/jquery-bgswitcher

jQuery.BgSwitcher实现背景图像切换效果。

518db709e55ab70fc0bade48c81be347.png

7.BackgroundScaleHoverEffect

地址:https://github.com/codrops/BackgroundScaleHoverEffect

使用 CSSclip paths 重现背景缩放悬停特效。

77ce30e4d5f4a65e8fe8d7b3e8d7dbd1.png

8.ImageGridMotionEffect

地址:https://github.com/codrops/ImageGridMotionEffect

4f3b60a13c10403a5bd3d77e6c52045b.png

为背景网格的图像提供运动悬停特效。

9.jquery.adaptive-backgrounds.js

地址:https://github.com/briangonzalez/jquery.adaptive-backgrounds.js

adaptive-background.js是一款jQuery插件,可以根据div,img标签里图片的边框颜色来动态调整父标签的背景颜色,有点类似iTunes的专辑详情的效果.

5864c090246417d3ba93e65294d88313.png

10.fixed-background-effect

地址:https://codyhouse.co/demo/fixed-background-effect/index.html#0

整屏滚动背景悬浮效果。

150a824d0bf831e6ad1d617e15a51dab.gif

11.jquery-warpdrive-plugin

地址:https://github.com/NiklasKnaack/jquery-warpdrive-plugin

query-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件。这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动。

5993749553f4df9eb1ddbe6eed62c1e1.png

12.RainEffect

使用WebGL在不同场景下的一些实验性降雨和水滴效应。

949f21015dea161e42a0a0164969207d.png

人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。


作者:lindelof 译者:前端小智 来源:github

原文:https://github.com/lindelof/awesome-web-effect

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值