React使用Particles.js粒子动画

1、安装
1、npm安装

npm i react-particle --save

2、yarn安装

yarn add react-particle

3、使用

import React from 'react'
import Particles from 'react-particles-js';const Home = () => {return (<div><Head><title>Home</title><link rel="icon" href="/favicon.ico" /></Head><Particles params={{particles: {line_linked: {shadow: {enable: true,color: "#fff",blur: 15,opacity:0.5}},number: {value: 50,density: {enable: true,value_area: 1000}},color: {value: "#ff4040"},"shape": {"type": "circle","stroke": {"width": 0,"color": "#000000"},"polygon": {"nb_sides": 5}},"opacity": {"value": 1,"random": true,"anim": {"enable": true,"speed": 1,"opacity_min": 1,"sync": false}},"size": {"value": 10,"random": true,"anim": {"enable": false,"speed": 180,"size_min": 0.1,"sync": false}},"move": {"enable": true,"speed": 6,"direction": "none","random": true,"straight": false,"out_mode": "out","bounce": false,"attract": {"enable": false,"rotateX": 600,"rotateY": 1200}},},interactivity: {"detect_on": "canvas","events": {"onhover": {"enable": true,"mode": "repulse"}},"modes": {"grab": {"distance": 100,"line_linked": {"opacity": 1}},"bubble": {"distance": 100,"size": 80,"duration": 2,"opacity": 0.8,"speed": 3},"repulse": {"distance": 150,"duration": 0.4},"push": {"particles_nb": 4},"remove": {"particles_nb": 2}}},retina_detect:true}}style={{width: '100%',backgroundColor: "#000" }}/></div>)
}export default Home

Particles Github有具体参数描述:

api描述

也可以参考NPM官方的介绍：
https://www.npmjs.com/package/react-particle

结果展示：

React使用Particles.js粒子动画相关推荐

particles.js粒子插件科技感背景
下载地址particles.js是一款js粒子特效插件,这是个particles.js插件的调用粒子,很有科技感的网页背景动画效果,网页颜色可以任意切换. dd:
particles.js粒子特效（常用登录页背景）
1.效果图 2.js下载 particles.js开源地址:GitHub - VincentGarreau/particles.js: A lightweight JavaScript library ...
vuejs粒子动画特效 npm安装插件vue-particles（particles.js） - 代码篇
文章目录 1. npm 安装插件`vue-particles` 2. 效果图: 3. 代码截图: 4. 代码示下: 5. 附件 · 文章阅读: 1. npm 安装插件vue-particles npm ...
常见的粒子动画js特效代码particles.js
下载地址基于canvas绘制particles.js插件实现的粒子动画特效,鼠标移动网页视差动画特效 dd:
粒子背景php,Particles.js实现粒子动态背景动画
这次给大家带来Particles.js实现粒子动态背景动画,Particles.js实现粒子动态背景动画的注意事项有哪些,下面就是实战案例,一起来看一下. 操作过程: 网上有基本流程,可以参考一下,不 ...
粒子动画 particles.js 在vue中的使用
1.安装particlesJS npm install --save particles.js 2.创建particles.json文件,设置particles的配置参数 {"particl ...
使用HTML+CSS+JS 实现粒子动画
:阿余 :2022-3-2-2 :如有错误,敬请指正.感谢! 使用HTML+CSS+JS 实现粒子动画 1 设置网页的样式 2 移动鼠标生成粒子 3 为每个粒子生成随机颜色属性 4 让粒子动起来 5 ...
【Vue实用功能】Vue中实现粒子效果 particles.js
Vue中实现粒子效果为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果下载particles.j ...
超酷炫粒子背景插件—particles.js
GitHub-教程-下载 1)先到github中下载particles.js-master.zip,下载下来的文件中有一个demo案例. 2)将demo文件中的particles.min.js.sty ...

React使用Particles.js粒子动画

React使用Particles.js粒子动画相关推荐

最新文章

热门文章