Circleblockdrop javascript plugin powered by jquery

We wrote a plugin that will animate when you click on an element. This is a circular animation that appears on click and disappears on zoom and transparency, thus implying the effect of a drop falling into water. Below there is an example in gif animation and a code of how it works.

circleblockdrop is powered by jquery !!!

Download circleblockdrop plugin archive:

download github

[info about files]

Original html markup:

Javascript source code:

You can check it yourself:

Go to page

Option List

1. Canceling the previous animation:

1) On the second button, it adds the undo of the created previous animation (the previous circle disappears)

Default: stack: true
stack: false
stack (type boolean)

2. Animation speed:

1) How fast the current lap will increase

Default: speed: 600
speed: 3000
speed (type integer)

3. Delay rate at the start of execution:

1) The crook that appears is delayed for a certain amount of time

Default: speedDelay: 0
speedDelay: 300
speedDelay (type integer)

4. The size of the circle that appears:

1) Specify the initial size of the circle when it appears

Default: elemBeginWidth: 5
elemBeginWidth: 30
elemBeginWidth (type integer) in px

Default: elemBeginHeight: 5
elemBeginHeight: 30
elemBeginHeight (type integer) in px

5. Fix the position of the circle:

1) Fix the appeared circle in the indicated positions

Default: align: 'none'
align: 'left, top'
align (type string)

There is a list that accepts the align property:

none - Cancel alignment

left - Left alignment

top - Top alignment

right - Right align

bottom - Bottom alignment

center - Center align

centerLeft - Center Align Left

centerRight - Center Align Right

centerTop - Top center alignment

centerBottom - Bottom center alignment

6. We output inside the appeared circle:

1) We specify any html code inside the circle, for example, text or something else

Default: elemInHtml: ''
elemInHtml: ' ‹div style="display: flex; align-items: center; justify-content: center; width: calc(100% - 1px); height: calc(100% - 1px); border-radius: 100%; background: blue; font-size: 0.1em;"›*‹/div› '
elemInHtml (type string)

7. Change the position of the current circle when changing the screen size:

1) When a circle is created, possibly at a specified slow time, and you want the circle to change its position, position (coordinates) is the resize property

Default: resize: false
resize: true
resize (type boolean)

8. change circle styles (color, etc.):

1) Change the current or add our own styles to the appeared circle

Default: elemCss

elemCss:

elemCss (type json)

9. You can change styles to the base block:

1) The base block is a block in which circles are drawn, and styles are applied to the base block

Default: css

сss (type json)

10. Settings plugin update:

1) If you changed the setting, then in this case there is a function that updates the plugin resizeFun:

11. Changing the setting (changing options):

1) If you decide to change the current plugin options for this there is updateFun with which you can change the incoming options. The example shows that we first applied the color red and then changed it to orange. For additional function, perform function resizeFun to update:

12. Changing classes and tag to work:

1) There are times when the user has a layout for the classes, for the id element or tags with which the plugin works, in this case, you can change this to prevent a layout conflict with the plugin: