中文 | English
JParticles（JavaScript Particles 的缩写）是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScript 粒子运动特效库。提供一些比较绚丽、实用的特效应用于 WEB 界面，希望能达到锦上添花的作用，给用户带来些许惊喜。
API 与源码设计理念信仰 Write Less, Do More 和 Keep It Simple, Stupid，希望项目是：易于使用的、性能高效的、易于维护的。
以下是浏览器对库的支持情况（源于此兼容性表），对于不支持的浏览器则会静默地失败：
如果您遇到问题或者好的建议，欢迎提交到 issues ，万分感谢。
每个版本详细的更新说明都记录在了 release 列表。
Copyright (c) 2016-present, Barrior Wei
使用Vue引入 代码：
import { Particle } from "jparticles";
new Particle.WaveLoading('#mainLoad', {
fillColor: '#27C9E5',
crestHeight: 5,
crestCount: 3,
speed: 0.2,
// 加载进度文本格式为空字符串时，不显示进度文本
textFormatter: '',
// 取消边框圆角
borderRadius: '',
// 设置遮罩图片，实现遮罩效果（如果希望防止图片闪烁，可提前加载完图片后再创建特效）
mask: 'https://raw.githubusercontent.com/Barrior/assets/main/github-logo-text.svg',
})
报错：
jparticles__WEBPACK_IMPORTED_MODULE_2__.Particle.WaveLoading is not a constructor"
found in
和
jparticles__WEBPACK_IMPORTED_MODULE_2__.Particle.WaveLoading is not a constructor
直接使用
new Particle('#mainLoad', { fillColor: '#27C9E5', crestHeight: 5, crestCount: 3, speed: 0.2, // 加载进度文本格式为空字符串时，不显示进度文本 textFormatter: '', // 取消边框圆角 borderRadius: '', // 设置遮罩图片，实现遮罩效果（如果希望防止图片闪烁，可提前加载完图片后再创建特效） mask: 'https://raw.githubusercontent.com/Barrior/assets/main/github-logo-text.svg', })
是可以的，但是其他效果都是报错，我网上也查不到相关问题，请作者大大回复下我，谢谢。
Bumps trim-newlines from 3.0.0 to 3.0.1.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase will rebase this PR@dependabot recreate will recreate this PR, overwriting any edits that have been made to it@dependabot merge will merge this PR after your CI passes on it@dependabot squash and merge will squash and merge this PR after your CI passes on it@dependabot cancel merge will cancel a previously requested merge and block automerging@dependabot reopen will reopen this PR if it is closed@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bumps ws from 6.2.1 to 6.2.2.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase will rebase this PR@dependabot recreate will recreate this PR, overwriting any edits that have been made to it@dependabot merge will merge this PR after your CI passes on it@dependabot squash and merge will squash and merge this PR after your CI passes on it@dependabot cancel merge will cancel a previously requested merge and block automerging@dependabot reopen will reopen this PR if it is closed@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bumps dns-packet from 1.3.1 to 1.3.4.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase will rebase this PR@dependabot recreate will recreate this PR, overwriting any edits that have been made to it@dependabot merge will merge this PR after your CI passes on it@dependabot squash and merge will squash and merge this PR after your CI passes on it@dependabot cancel merge will cancel a previously requested merge and block automerging@dependabot reopen will reopen this PR if it is closed@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bumps url-parse from 1.4.7 to 1.5.1.
eb6d9f5 [dist] 1.5.1750d8e8 [fix] Fixes relative path resolving #199 #200 (#201)3ac7774 [test] Make test consistent for browser testing267a0c6 [dist] 1.5.0d1e7e88 [security] More backslash fixes (#197)d99bf4c [ignore] Remove npm-debug.log from .gitignore422c8b5 [pkg] Replace nyc with c8933809d [pkg] Move coveralls to dev dependencies190b216 [pkg] Add .npmrcce3783f [test] Do not test on all available versions of Edge and SafariDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase will rebase this PR@dependabot recreate will recreate this PR, overwriting any edits that have been made to it@dependabot merge will merge this PR after your CI passes on it@dependabot squash and merge will squash and merge this PR after your CI passes on it@dependabot cancel merge will cancel a previously requested merge and block automerging@dependabot reopen will reopen this PR if it is closed@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bumps elliptic from 6.5.3 to 6.5.4.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase will rebase this PR@dependabot recreate will recreate this PR, overwriting any edits that have been made to it@dependabot merge will merge this PR after your CI passes on it@dependabot squash and merge will squash and merge this PR after your CI passes on it@dependabot cancel merge will cancel a previously requested merge and block automerging@dependabot reopen will reopen this PR if it is closed@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bumps ini from 1.3.5 to 1.3.8.
a2c5da8 1.3.8af5c6bb Do not use Object.create(null)8b648a1 don't test where our devdeps don't even workc74c8af 1.3.7024b8b5 update deps, add linting032fbaf Use Object.create(null) to avoid default object property hazards2da9039 1.3.6cfea636 better git push script, before publish instead of after56d2805 do not allow invalid hazardous string as section nameThis version was pushed to npm by isaacs, a new releaser for ini since your current version.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase will rebase this PR@dependabot recreate will recreate this PR, overwriting any edits that have been made to it@dependabot merge will merge this PR after your CI passes on it@dependabot squash and merge will squash and merge this PR after your CI passes on it@dependabot cancel merge will cancel a previously requested merge and block automerging@dependabot reopen will reopen this PR if it is closed@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bumps ini from 1.3.5 to 1.3.7.
This version was pushed to npm by isaacs, a new releaser for ini since your current version.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase will rebase this PR@dependabot recreate will recreate this PR, overwriting any edits that have been made to it@dependabot merge will merge this PR after your CI passes on it@dependabot squash and merge will squash and merge this PR after your CI passes on it@dependabot cancel merge will cancel a previously requested merge and block automerging@dependabot reopen will reopen this PR if it is closed@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bumps acorn from 5.7.3 to 5.7.4.
6370e90 Mark version 5.7.4fbc15b1 More rigorously check surrogate pairs in regexp validatorDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase will rebase this PR@dependabot recreate will recreate this PR, overwriting any edits that have been made to it@dependabot merge will merge this PR after your CI passes on it@dependabot squash and merge will squash and merge this PR after your CI passes on it@dependabot cancel merge will cancel a previously requested merge and block automerging@dependabot reopen will reopen this PR if it is closed@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
使用layui+JParticles想要实现一个轮播图的粒子运动效果，同时放置了3个JParticles对象，但是出现的效果是：第一张很正常，第二张和第三章图渲染出来的canvas高度和宽度都只有100，这个是为什么？渲染出来的canvas如下：
<canvas style="display: block; background: rgba(0, 0, 0, 0);" width="100" height="100"></canvas>
html代码如下：
<div class="layui-carousel " width="100%" height="600px" id="demo" lay-filter="login">
<div carousel-item>
<div>
<div class="jp1"></div>
</div>
<div>
<div class="jp2"></div>
</div>
<div>
<div class="jp3"></div>
</div>
</div>
</div>
//粒子线条
$(".jp1").jParticle({
background: "green",//背景颜色
color: "#fff",//粒子和连线的颜色
particlesNumber:100,//粒子数量
//disableLinks:true,//禁止粒子间连线
//disableMouse:true,//禁止粒子间连线(鼠标)
particle: {
minSize: 1,//最小粒子
maxSize: 3,//最大粒子
speed: 30,//粒子的动画速度
}
});
$(".jp2").jParticle({
background: "red",//背景颜色
color: "#fff",//粒子和连线的颜色
particlesNumber:100,//粒子数量
//disableLinks:true,//禁止粒子间连线
//disableMouse:true,//禁止粒子间连线(鼠标)
particle: {
minSize: 1,//最小粒子
maxSize: 3,//最大粒子
speed: 30,//粒子的动画速度
}
});
Bumps handlebars from 4.1.2 to 4.5.3.
Sourced from handlebars's changelog.
v4.5.3 - November 18th, 2019
Bugfixes:
- fix: add "no-prototype-builtins" eslint-rule and fix all occurences - f7f05d7
- fix: add more properties required to be enumerable - 1988878
Chores / Build:
- fix: use !== 0 instead of != 0 - c02b05f
- add chai and dirty-chai and sinon, for cleaner test-assertions and spies, deprecate old assertion-methods - 93e284e, 886ba86, 0817dad, 93516a0
Security:
- The properties
__proto__,__defineGetter__,__defineSetter__and__lookupGetter__have been added to the list of "properties that must be enumerable". If a property by that name is found and not enumerable on its parent, it will silently evaluate toundefined. This is done in both the compiled template and the "lookup"-helper. This will prevent new Remote-Code-Execution exploits that have been published recently.Compatibility notes:
- Due to the security-fixes. The semantics of the templates using
__proto__,__defineGetter__,__defineSetter__and__lookupGetter__in the respect that those expression now returnundefinedrather than their actual value from the proto.- The semantics have not changed in cases where the properties are enumerable, as in:
{ __proto__: 'some string' }
- The change may be breaking in that respect, but we still only increase the patch-version, because the incompatible use-cases are not intended, undocumented and far less important than fixing Remote-Code-Execution exploits on existing systems.
v4.5.2 - November 13th, 2019
Bugfixes
- fix: use String(field) in lookup when checking for "constructor" - d541378
- test: add fluent API for testing Handlebars - c2ac79c
Compatibility notes:
... (truncated)
- no incompatibility are to be expected
c819c8b v4.5.3827c9d0 Update release notesf7f05d7 fix: add "no-prototype-builtins" eslint-rule and fix all occurences1988878 fix: add more properties required to be enumerable886ba86 test/chore: add chai/expect and sinon to "runtime"-environment0817dad test: add sinon as global variable to eslint in the specs93516a0 test: add sinon.js for spies, deprecate current assertions93e284e chore: add chai and dirty-chai for better test assertionsc02b05f fix: use !== 0 instead of != 08de121d v4.5.2Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase will rebase this PR@dependabot recreate will recreate this PR, overwriting any edits that have been made to it@dependabot merge will merge this PR after your CI passes on it@dependabot squash and merge will squash and merge this PR after your CI passes on it@dependabot cancel merge will cancel a previously requested merge and block automerging@dependabot reopen will reopen this PR if it is closed@dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
https://jparticles.js.org/#/en/examples/wave
JParticles is a lightweight JavaScript library for build user interfaces base on the Canvas. That provide some cool particle effects to bring a surprise for the users.
Gitalk /examples/wavehttps://jparticles.js.org/#/cn/examples/wave-loading
JParticles is a lightweight JavaScript library for build user interfaces base on the Canvas. That provide some cool particle effects to bring a surprise for the users.
Gitalk /examples/wave-loadinghttps://jparticles.js.org/#/examples/line
JParticles is a lightweight JavaScript library for build user interfaces base on the Canvas. That provide some cool particle effects to bring a surprise for the users.
Gitalk /examples/linehttps://jparticles.js.org/#/examples/particle
JParticles is a lightweight JavaScript library for build user interfaces base on the Canvas. That provide some cool particle effects to bring a surprise for the users.
Gitalk /examples/particlehttps://jparticles.js.org/#/examples/quick-start
JParticles is a lightweight JavaScript library for build user interfaces base on the Canvas. That provide some cool particle effects to bring a surprise for the users.
Gitalk /examples/quick-starthttps://jparticles.js.org/#/examples/snow
JParticles is a lightweight JavaScript library for build user interfaces base on the Canvas. That provide some cool particle effects to bring a surprise for the users.
Gitalk /examples/snow
Snow effect supports setting the duration and related methods and events.
fallAgain: Method of snowing again.onFinished: Event triggered after all snowflakes have drifted.duration)及相关的方法和事件。
fallAgain: 再次下雪。onFinished: 雪花均飘落后触发的事件。Particle and Snow effects support custom shapes, making animations more colorful.mask parameter of Wave and WaveLoading effects supports the data type of CanvasImageSource.Wave 与 WaveLoading 效果的 mask 参数支持 CanvasImageSource 的数据类型。Fix utils.extend error during deep copy.
2.0.0 and rename it to JParticles.waveLoading - simulation progress bar to load.onDestroy() event.lineShape parameter to define the line shape of the particles.parallax parameter to create parallax effect.range and proximity parameters support the value of (0, 1).distance parameter to proximity to get closer to it's functional meaning.setOptions() method.setOffsetTop() method.stroke parameter to line to unify style.fix IE error.
Source code(tar.gz)Particleground.js v1.0.0 诞生啦! 提供粒子无序运动，波浪运动，雪花飘落三种特效！
Source code(tar.gz)Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac
Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops
react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as
3d-particle-mofing ● DEMO Usage Clone repository Install Node.js Create an .env file and copy the contents of .env-sample. Run following commands np
Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r
Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De
Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js
Easy Effect ?? Introduction Easy Effect is a WYSIWYG animation editor based on Lottie. ✨ Feature ?? ease to use Anyone who want to create an animation
Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp
Sparticles https://sparticlesjs.dev Lightweight, High Performance Particles in Canvas. For those occasions when you ?? just ?? gotta ?? have ?? sparkl
Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle
ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install <script src="shuffle-text.js"></script> NPM In
gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti
gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti
pickout Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped. DEMO PAGE For syntax of the previous version click here How to
SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG
MMM-EyeCandy Animated images that are superficially attractive and entertaining but intellectually undemanding. Add some EyeCandy to your mirror. Some
Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions
Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you
51 Nov 15, 2022
1.4k Jan 4, 2023
92 Dec 17, 2022
23 Oct 28, 2022
97 Dec 8, 2022
10 Dec 16, 2022
477 Nov 12, 2022
171 Dec 29, 2022
96 Dec 24, 2022
68 Nov 28, 2022
89 Sep 20, 2022
301 Dec 24, 2022
36 Dec 28, 2022
797 Nov 26, 2022