jQuery-canvas-sparkles.js — a jquery plugin for sparkling example

The jquery-canvas-sparkles is a small plugin for making DOM elements sparkle.
The official GitHub here
As soon as I noticed that, I felt like a fairy story is a relevant thought. Here I made an example of this plugin.

I will write down how I made this with the plugin.
Step1:
link the jquery library and jquery-canvas-sparkles.js

Step2:
two div tags are included in the magic box.(HTML)

Style the elements inside. (CSS)

When hovering over the fairy, the wand animates from left to right top.
Step3:
apply the plugin with sparkle() (JS)

When mouseover fairy, the magic box starts sparkling.

color:the sparkles’ colorcount:how many stars show in the elementoverlap:how far over the edgespeed:how fast the sparkles moveminSize:the minmum size of starmazSize:the maxmun size of starderection:the direction of star moving [up/down/both]

Three events:

start.sparkle:start

stop.sparkle:stop

resize.sparkle:resize the canvas size and change the position of sparkles

Full codes in GitHub

👉Follow me for more useful web development content! love sharing🥰