
Плагин circleblockdrop на javascript работающий на jquery
Написали плагин, в котором будет анимация при клике на элемент. Это круговая анимация появляющаяся при клике и исчезнованием при увеличении и прозрачности, тем самым подразумевать эффект падающую каплю в воду. Внизу есть пример в gif анимации и код как это работает.
circleblockdrop работает на jquery!!!
Скачать плагин circleblockdrop архивом:

Исходная разметка html:
Исходный код javascript:
Сможете сами проверить:
1) На второй кнопке добавляет отмену созданной предыдущей анимации (пропадает предыдущий круг)
stack: false
stack (тип boolean)

1) С какой скоростью будет увеличиваться текущий круг
speed: 3000
speed (тип integer)

1) Задерживается появившийся круг на определенное количество времени
speedDelay: 300
speedDelay (тип integer)

1) Указываем начальный размер круга при появлении
elemBeginWidth: 30
elemBeginWidth (тип integer) в px
elemBeginHeight: 30
elemBeginHeight (тип integer) в px

1) Зафиксировать появившегося круга в указанных положениях
align: 'left, top'
align (тип string)
Есть список которые принимает свойство align:

1) Указываем любой код html внутри круга, к примеру текст или что то другое
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 (тип string)

1) Когда создается круг возможно в указанном медленном времени, и ихочешь что бы круг изменял свои место положение (координаты) есть свойство resize
resize: true
resize (тип boolean)

1) Меняем текущие или добавляем свои стили на появившийся круг

1) Базовый блок это блок в котором выводятся круги, и на базовый блок применяются стили
1) Если изменили настройку то в этом случаи есть функция которая обнавляет плагин resizeFun:
1) Если вы решили изменить текущие опции плагина для этого есть updateFun с помощью которой можно изменить входящие опции. В примере показанно что сначало применили цвет красный а потом изменили на оранжевый цвет. Для дополнительной функции выполняй функцию resizeFun для обновления:
1) Бывают моменты что у пользователя установлена верстка к классам, к id элементу или тегам с которыми работает плагин, в этом случаи можно это изменить для предотвращения конфликта верстки к плагину: