酷炫背景粒子插件particles.js星空背景使用示例源码 - 附演示及下载地址

最新推荐文章于 2023-02-28 09:44:49 发布
最新推荐文章于 2023-02-28 09:44:49 发布
阅读量4.1k 收藏 18
点赞数 3
分类专栏： 前端 文章标签： 粒子插件 星空背景 particle 源码 示例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhichaosong/article/details/91695454
版权

官方给的例子有点复杂，项目中一般就引一个 JS 文件然后调用好了，简单粗暴，网上很少有想要的效果，而且都没有源码，这里分享一个

文章目录

一、源码地址

二、实现效果

1. 电脑端

在这里插入图片描述

2. 手机端

手机端

三、源码

<!DOCTYPE html>
<html>
<head>
<style>
	.diy-bg {
        position: fixed;
        width: 100%;
        height: 100%;
		background-image: url(loginbg.jpg);
		background-size: cover;
	}
</style>
</head>

<body style="margin: 0;">
<div id="particles-js" class="diy-bg">
    <canvas class="particles-js-canvas-el" width="980" height="1742" style="width: 100%; height: 100%;"></canvas>
</div>
<script src="particles.min.js"></script>
<script>
    particlesJS("particles-js", {
        particles: {
            number: {
                value: 120,
                density: {
                    enable: true,
                    value_area: 800
                }
            },
            color: {
                value: "#ffffff"
            },
            shape: {
                type: "circle",
                stroke: {
                    width: 0,
                    color: "#000000"
                },
                polygon: {
                    nb_sides: 5
                },
                image: {
                    src: "img/github.svg",
                    width: 100,
                    height: 100
                }
            },
            opacity: {
                value: .5,
                random: false,
                anim: {
                    enable: false,
                    speed: 1,
                    opacity_min: .1,
                    sync: false
                }
            },
            size: {
                value: 1,
                random: true,
                anim: {
                    enable: false,
                    speed: 20,
                    size_min: .1,
                    sync: false
                }
            },
            line_linked: {
                enable: true,
                distance: 40,
                color: "#fff",
                opacity: 1,
                width: 1
            },
            move: {
                enable: true,
                speed: 3,
                direction: "none",
                random: false,
                straight: false,
                out_mode: "out",
                attract: {
                    enable: false,
                    rotateX: 600,
                    rotateY: 1200
                }
            }
        },
        interactivity: {
            detect_on: "canvas",
            events: {
                onhover: {
                    enable: true,
                    mode: "grab"
                },
                onclick: {
                    enable: true,
                    mode: "push"
                },
                resize: true
            },
            modes: {
                grab: {
                    distance: 120,
                    line_linked: {
                        opacity: 1
                    }
                },
                bubble: {
                    distance: 400,
                    size: 40,
                    duration: 2,
                    opacity: 8,
                    speed: 3
                },
                repulse: {
                    distance: 300
                },
                push: {
                    particles_nb: 4
                },
                remove: {
                    particles_nb: 2
                }
            }
        },
        retina_detect: true,
        config_demo: {
            hide_card: false,
            background_color: "#b61924",
            background_image: "",
            background_position: "50% 50%",
            background_repeat: "no-repeat",
            background_size: "cover"
        }
    });
</script>

</body>
</html>
zhichaosong
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
10-19
本文给大家分享Particles.js基于Canvas画布创建粒子颗粒效果，代码非常简单，需要的朋友参考下吧
vue中使用动画vue-particles
weixin_30666401的博客
12-09 1513
1.下载依赖 npm install vue-particles --save-dev 2.main.js引入 import Vue from 'vue' import VueParticles from 'vue-particles' Vue.use(VueParticles) 3.直接使用 <vue-particles col...
星空粒子特效 particles.rar
08-18
1..在vue工程上应用时，可能会出现容器标签找不到的问题，此时应该放弃在页头Header里直接通过标签引入的方式，改用动态添加，在vue的生命周期函数里，当组件挂载完毕后，再执行如下方法： const oScript = document.createElement('script'); oScript.type = 'text/javascript';oScript.src = "../static/js/particles.min.js"; document.body.appendChild(oScript); 此时就不会出现容器标签不存在的错误提示了。 说明：上面的文件路径是你下载压缩包后放入到工程中的js文件路径。
HTML5全屏星空背景动画特效
06-24
HTML5全屏星空背景动画特效是一款基于html5 canvas制作的星空背景动画效果。
particles.js在vue中的实战用法
weixin_44251396的博客
01-06 1994
先看一下效果吧，以便有充分的兴趣读下去！ 用法： 1. 先下载 npm install --save particles.js 2.引入 如果多个文件要用的话，可以用如下引入，单文件则只需import particles from 'particles.js' import particles from 'particles.js' Vue.use(particles) 3. tem...
particles.js粒子特效（常用登录页背景）
weixin_39921970的博客
11-02 2012
particles.js开源地址：GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles 4、DOM 如果页面没有显示效果，请检查canvas和父层div的高度是否有高度。对应第2点的开源地址的详细文档阅读
网页粒子背景插件 -Canvas-nest.js
dreamboycs的博客
10-12 969
、简介 Canvas-nest.js是一个非常好看的网页粒子背景插件，不需要依赖任何第三方库即可运行，提供额非常炫酷的背景。   2、特点 不依赖于任何框架或者库，使用原生js编写。轻量级，只有不到2kb（50行代码左右）。使用起来非常简单，直接在html页面引入即可。   3、使用方法 直接把下面这段代码粘贴到HTML的body标签中即可 &lt;scripttype="text...
粒子动态背景--在Vue3中使用VueParticles
Kylin的博客
12-08 8243
前言 在公司某项目登录界面见到粒子动画背景，也想将这个动画效果用在自己的项目上，起初以为直接安装vue-particles就可以了，结果自己的项目是Vue3的，不兼容。根据网上调研，在Vue3中可以使用particles.vue3实现这个粒子动画 particles.vue3官网 https://particles.js.org/ Demos 就是一个演示，在里面可以自己更改一些配置 Presets 就是预设的动画，点进去可以看到效果 API Docs 文档 CodePen 代
背景粒子效果的实现----particles.js使用demo
静水流深
05-20 9297
使用Demo 首先需要在index.html文件中实现这写代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;particle js dome&lt;/title&gt; &
2021-08-13 canvas 超好看的动态粒子背景
成长的博客
08-13 362
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&lt
JS库particles.js创建超炫背景粒子插件(附源码下载)
12-29
插件描述：particles.js用于创建粒子的轻量级 JavaScript 库。  查看 效果 源码下载 使用 加载 particles.js和配置粒子 <div id=particles-js> [removed][removed] app.js /* particlesJS.load(@dom-id, @path-...
vue+particles.js+酷炫的前端登录界面.zip
05-17
自己下载代码，一看就会
超酷炫粒子背景插件—particles.js
想好了就去做吧 即便失败了 至少这条路上留下了你的脚印
03-07 2859
GitHub-教程-下载 1）先到github中下载particles.js-master.zip，下载下来的文件中有一个demo案例。 2）将demo文件中的particles.min.js、style.css、app.js、particles.json copy到我们项目里 用法： 第一步，在html中引入particles.min.js、style.css、app.js脚本文件，注意引用地址...
particles.js粒子插件科技感背景
ICode联盟
09-05 405
下载地址particles.js是一款js粒子特效插件，这是个particles.js插件的调用粒子，很有科技感的网页背景动画效果，网页颜色可以任意切换。 dd:
JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
weixin_30896763的博客
07-26 1348
百度云盘　　传送门　　密码:xftr 满天星星闪烁动画效果： (可用星空动画来作为页面背景，白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery夜晚天空...
vue动态粒子背景效果-particles、threejs
m0_65720832的博客
11-28 1212
使用script标签引入，比较简单方便，但是效果比较单一，而且是在body上的背景，而vue又是单页面应用，所以说一个页面引入后其他页面也会有这个效果。引入vue-particles插件。使用threejs模拟粒子动态效果。引入particles插件。
超炫背景粒子插件particles.js
rdhj5566的专栏
09-08 2519
NOSQL EYE style="height: 100%;"> NOSQL EYE class="ipt easyui-validatebox" placeholder="输入您的用户名" data-options="required:true"> class="ipt easyui-v
fastadmin后台login登录页面增加canvas粒子动画背景
赵一舟的博客
02-28 1170
【代码】fastadmin后台login登录页面增加canvas粒子动画背景。
摄像头视频流显示报错Failed to execute 'createObjectURL' on 'URL'
热门推荐
zhichaosong的博客
03-18 3万+
研究即时通信的过程中需要调用摄像头，发现报错，原来是谷歌弃用了这个方法，根据官方提示修改即可 1. 报错信息 Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. a...
vue2脚手架如何使用particles.js
最新发布
06-08
要在Vue 2项目中使用particles.js，你需要完成以下步骤： 1. 首先，你需要在项目中安装particles.js。你可以通过npm或yarn来进行安装，具体命令如下： ```bash npm install particles.js 或 yarn add particles.js ``` 2. 接下来，你需要在Vue项目的入口文件（通常是main.js）中导入particles.js和VueParticles组件，如下所示： ```javascript import Vue from 'vue' import VueParticles from 'vue-particles' import particlesJS from 'particles.js' Vue.use(VueParticles) ``` 这里我们使用了VueParticles组件来将particles.js集成到Vue中。 3. 然后，在你的Vue组件中，你可以使用VueParticles组件来渲染出particles.js的效果，如下所示： ```html <template> <div id="particles-js"></div> </template> <script> export default { mounted () { this.$nextTick(() => { particlesJS('particles-js', { // 设置particles.js的参数 }) }) } } </script> ``` 在这个例子中，我们在mounted钩子函数中调用particlesJS函数来初始化particles.js，并传递了一个DOM元素的ID（这里是particles-js）和一些配置参数。 这样，你就可以在Vue项目中使用particles.js了。当然，你还可以根据你的需要来调整particles.js的配置参数，以获得更加丰富的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值