Circleblockdrop plugin (jquery, javascript)

I have an interesting plugin for you. This is an effect triggered when you click on a button. This is a circular animation that appears when you click and disappears when you increase and make it transparent, thus implying the effect of a drop falling into water. Below is an example in gif animation and code on how it works.

ircleblockdrop works on jquery!!!

Download circleblockdrop plugin:

download from github

[file security]

Original html markup:

Javascript source code:

Result of work:

Go to page

There are several ways to call the plugin

1. If you need to initialize to the specified selectors, and also initialize the plugin to the button if it is created as a new one in the dom

For example, if a new button is created on the page, the plugin will immediately initialize it and it will work.

This option is recommended to be used.

Example 1:

Example 2:

2. If you are navigating through the nesting of a document home

Example 1:

Example 2:

Options

1. Cancel previous animation and start new one (Delete previous elements)

Delete previous elements if new one is created

Default: stack: true
Type: boolean

2. Speed of operation (animation) of the element

The speed of the newly created element

Default: speed: 600
Type: integer

3. The delay rate of the initial execution of the element

Delays the start of execution of the created element for the specified amount of time

Default: speed_delay: 0
Type: integer

4. Size of the created element

Specify the initial size of the element

Default: elem_begin_width: 5
Type: integer в em

Default: elem_begin_height: 5
Type: integer в em

5. Element position:

Fix the position of the element in the specified positions

Default: align: 'none'
Type: string

List of values for the align property:

none - Undo alignment

left - Left alignment

top - Align to top

right - Right Alignment

bottom - Bottom Alignment

center - Center alignment

centerLeft - Align center left

centerRight - Center right alignment

centerTop - Align top center

centerBottom - Center Bottom Alignment

6. We output inside the created element

We specify any html code inside the element, for example text or something else

Default: elem_in_html: ''
Type: string

7. Change element coordinates if button size has changed

Once an element is created at a specified position, the positions are saved during the animation and when the button size is changed, the positions are saved

Default: resize: false
Type: boolean

8. Element styles

Change the current or add your own styles to the created element

Default: elem_css

9. Button styles that are triggered when a click is performed

Default: css

10. Changing classes and tag name for work

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

11. Slow Motion Effects for Animation

We apply various effects, behaviors as the element should move

The following list is available for the "easing" value:

swing

linear

circleblockdropEaseOutQuad

circleblockdropEaseInOutQuad

circleblockdropEaseOutCubic

circleblockdropEaseInOutQuart

circleblockdropEaseOutQuint

circleblockdropEaseOutSine

circleblockdropEaseOutBounce

circleblockdropEaseInCirc

circleblockdropEaseOutCirc

circleblockdropEaseInOutCirc

If you need more additional effects, you can load the "jquery" file, which will supplement the "easing" list:

https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js

And also the list of effects is known, the site demonstrates these effects:

- https://plugins.compzets.com/animatescroll/

Correct use of the option:

Events when executing a plugin

event - button events are returned

data - the button data is transmitted (these can be options that you transmit when calling or data that is processed during the event triggering process)

(Event) Initializing the button:

(Event) Adding logic to an element that has not yet been created in the button:

(Event) Creating an element in a button:

(Event) If the button size changes when the browser window is changed, this event will be triggered:

(Event) Click on the button:

(Event) The click on the button is completed:

(Event) Performing animation of an element in a button:

(Event) Completing the animation of an element in a button:

(Event) Changing options when trigger is executed:

(Trigger) Change the options to buttons:

(Trigger) Disabling the plugin (We can't destroy it, we just disable it):