Web animation javascript plugin for beautiful background particle systems.

The Maintained and LTS version of popular Particleground.

Yoo Jung Ahn or known as Daisy of Momoland. She is the inspiration in this open source project. She is a member of popular south korean KPOP girl group Momoland. My only reason why I name this project with her name is that to make this project very unique from other open source project out there.

Hi Daisy, if you're reading this I'm glad to say Happy Birthday! I dedicated this simple open source project to you and to my fellow kpop fan developers out there. I hope you will notice this useful project soon!

Hey Devs! Help me to spread the word about this animation JavaScript plugin and let others give it a try. If you're a fan of KPOP then you should probably share this project to your developer or programmer friends and let them use this.

Keep in mind that this is the maintained and long term support version of Particleground by jnicol.

This JavaScript plugin includes an optional parallax effect controlled by the mouse on desktop devices and gyroscope on mobile devices. Proven works with any browser that supports HTML5 canvas.

You can use it as jQuery plugin or use it as in your vanilla javascript project. Your choice!

In Action: https://daisyjs.warengonzaga.com

Demo files can be found in "demo" folder.

Vanilla JS

daisyjs(document.getElementById('your-element');

jQuery

$('#your-element').daisyjs();

Options can be set by passing an options object to the constructor. Check some example usage below.

Vanilla JS

// Let's set the colors of particle dots and lines
daisyjs(document.getElementById('your-element'), {
    dotColor: '#ff0000',
    lineColor: '#ff0000'
});

jQuery

$('#your-element').daisyjs({
    dotColor: '#ff0000',
    lineColor: '#ff0000'
});

For a full list of options please visit the wiki page!

DaisyJS has some basic public methods which can be used to interact with your daisy instance. See example below.

Vanilla JS

var momoland = daisyjs(document.getElementById('your-element');
momoland.pause();

jQuery

$('#your-element').daisyjs('pause');

For a full list of methods please visit the wiki page!

DaisyJS is powered by GulpJS which means you can build from source to production version. You just need to do is do the following below.

npm install

Then after installing the required devdependencies do the following.

gulp

If you want to clean or delete the entire "./prod" folder just do the following.

gulp clean

or

gulp clean --build

For cleaning the scripts only inside the "./prod" folder do the following.

gulp clean --scripts

For cleaning the daisy.js and daisy.min.js in the root do the following.

gulp clean --daisy

If you want to clear all existing builds just do the following.

gulp reset

Use the CDN below powered by JSDelivr.

Development Version

<script src="https://cdn.jsdelivr.net/gh/warengonzaga/daisy.js/daisy.js"></script>

Minified Version

<script src="https://cdn.jsdelivr.net/gh/warengonzaga/daisy.js/daisy.min.js"></script>

Maintained and LTS version of Particleground by jnicol.

• Improve Build Process
• Add Customization Features
• Code Cleanup
• Add continuous integration (travis)
• More Demo
• More... (have suggestions? let me know!)

Contributions are welcome, create a pull request to this repo and I will review your code.

If you're facing a problem in using DaisyJS please let me know by creating an issue in this github repository. I'm happy to help you! Don't forget to provide a Codepen or Web Maker of it!

Wanna see other projects I made? Join today!

If you love this project please consider to support the development by means of coffee. I spend and waste my time just to save your time! Be a sponsor or backer of this project. Just a cup of coffee!

• your_name_here

Wanna see your name here? Just buy me a coffee!

Daisy.js is Developed and Maintained by Waren Gonzaga

💻 Made with ❤️ by Waren Gonzaga with YHWH 🙏