用鼠标与指尖
让互联网更加有趣

[HTML 5] 鼠标跟随网页背景特效代码下载与使用

近期在网页背景上增加了各HTML 5特效,就是你现在可以看到的网页左右两侧的蓝色的运动像素点。

这个HTML 5特效的作者和名字具体是什么就不清楚了,因此我只能将它描述为辐射式伞状网页背景特效了。

更新:人多力量大感谢网友Ladder提供的原作者链接:https://github.com/VincentGarreau/particles.js

要想在网页是上使用这个特效是非常非常简单的,只需要将以下代码加入到网站的头部中进行加载就可以了。

<script type='text/javascript' color='102,185,255' zIndex='-10' opacity='50' count='99' src='JS'><script>
//dl.lancdn.com/landian/dev/h5/canvas/canvas-nest.min.js ===>将此文件在你服务器的地址替换掉上面的JS地址

其中核心的JavaScript建议转存到你自己的服务器上进行调用,我的下载服务器指定什么时候就会挂掉。

102.185.255代表的是线条的颜色,如果你想换颜色那么直接找个颜色类工具对应颜色找到RGB值替换即可。

该特效使用的前提是网页背景必须位于特效的下方,不然效果被网页背景遮挡了那么在前台看不到任何东西。

例如本页面正文内容就不会看到这个特效,原因是基于用户反馈效果影响阅读因此我们在正文加白色的浮层。

这样子特效是被白色的浮层遮挡在下方的,因此鼠标划过特效依然还在正常运行但经过正文时看不到效果的。

WordPress可下载该插件启用:https://github.com/aTool-org/canvas-nest-for-wp/archive/master.zip

支付宝扫码打赏 微信扫码打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

未经允许不得转载:小伟博客 » [HTML 5] 鼠标跟随网页背景特效代码下载与使用

分享到:更多 ()

评论 22

  1. #12

    在网页上只有上一半有显示,请问这个改哪个参数

    Anonymous2个月前 (09-22)Reply
    • 不好意思,是我网页body的问题

      Anonymous2个月前 (09-22)Reply
  2. #11

    那句代码放在什么位置?

    Colossus6个月前 (05-13)Reply
    • 放在网页底部的body前

      小伟6个月前 (05-15)Reply
  3. #10

    有一个坑得填一下,js得放在body的底部,放在body上边的话会报Cannot read property ‘appendChild’ of undefined的错误

    哈哈8个月前 (04-09)Reply
    • 最新版应该修复了。还有就是JS冲突有可能的。

      小伟8个月前 (04-09)Reply
  4. #9

    IE不兼容?

    白白10个月前 (01-23)Reply
  5. #8

    小白想用又不懂 有点懵逼 不知道该往哪加合适!作者大大方便教一下嘛

    不知名的小白11个月前 (12-31)Reply
    • 你看评论啊,我说了那么多次呢。

      小伟11个月前 (01-02)Reply
  6. #7

    完全不会用啊

    sadsdaasd11个月前 (12-23)Reply
  7. #6

    成功了,昨天是没调好层次问题,z-index。谢谢作者

    KL311个月前 (12-20)Reply
  8. #5

    怎么把这个效果放到背景之上啊?作者

    KL311个月前 (12-19)Reply
  9. #4

    我想问一下这个文件是怎么做成链接的

    码农1年前 (2018-11-06)Reply
    • 你问的我理解不了

      小伟1年前 (2018-11-07)Reply
  10. #3

    您好,请问 我通过 https://github.com/aTool-org/canvas-nest-for-wp/archive/master.zip 下载了,但是里面没有 canvas-nest.min.js 这个文件, 是将下载的全部文件放在服务器上 然后修改下地址 然后调用 就可以了吧。?

    李涛1年前 (2018-11-02)Reply
  11. #2

    请问下,这个可以指定模块吗?比如我只要某个DIV里面有这个动画

    潇雨默1年前 (2018-10-29)Reply
  12. #1

    找到效果, 但是做不成你这种可以拉成伞这个效果,博主可以把你这个效果demo发一份吗?

    chxyou1年前 (2018-10-10)Reply
    • 把以下代码添加到你网站底部直接调用CDN的JS

      
      CDN调用地址: https://cdn.staticfile.org/canvas-nest.js/2.0.3/canvas-nest.js
      
      小伟1年前 (2018-10-10)Reply

小伟博客 · 给你感兴趣的内容

联系我们官方交流群