Плагин circleblockdrop (jquery, javascript)

У меня к вам интересный плагин. Это срабатывание эффекта при клике на кнопку. Это круговая анимация появляющаяся при клике и исчезнованием при увеличении и прозрачности, тем самым подразумевает, эффект падающую каплю в воду. Внизу есть пример в gif анимации и код как это работает.

circleblockdrop работает на jquery!!!

Скачать плагин circleblockdrop:

скачать из github

[безопасность файлов]

Исходная разметка html:

Исходный код javascript:

Результат работы:

Перейти на страницу

Выполнить вызов плагина можно несколькими способами

1. Если вам нужно инициализировать на указанные селекторы, и также инициализировать плагин на кнопку если она будет созданна как новая в dom

К примеру если будет созданна новая кнопка на странице, то плагин сразу ее инициализирует и она будет работать.

Этот вариант рекомендуется применять.

Пример 1:

Пример 2:

2. Если вы выполняете навигаю по вложенности дом документа

Пример 1:

Пример 2:

Опции

1. Отмена предыдущей анимации и начать новую (Удалить предыдущие элементы)

Удалить предыдущие элементы, если создался новый

По умолчанию: stack: true
Тип: boolean

2. Скорость работы (анимации) элемента

Скорость работы нового созданного элемента

По умолчанию: speed: 600
Тип: integer

3. Скорость задержки начального выполнения элемента

Задерживается в начале выполнения созданный элемент, в указанное количество времени

По умолчанию: speed_delay: 0
Тип: integer

4. Размер созданного элемента

Указываем начальный размер элемента

По умолчанию: elem_begin_width: 5
Тип: integer в em

По умолчанию: elem_begin_height: 5
Тип: integer в em

5. Позиция элемента:

Зафиксировать позицию элемента, в указанных положениях

По умолчанию: align: 'none'
Тип: string

Список значений для свойства align:

none - Отменить выравнивание

left - Выравнивание по левой части

top - Выравнивание по верхней части

right - Выравнивание по правой части

bottom - Выравнивание по нижней части

center - Выравнивание по сентру

centerLeft - Выравнивание по сентру левой части

centerRight - Выравнивание по сентру правой части

centerTop - Выравнивание по сентру верхней части

centerBottom - Выравнивание по сентру нижней части

6. Выводим внутри созданного элемента

Указываем любой код html внутри элемента, к примеру текст или что то другое

По умолчанию: elem_in_html: ''
Тип: string

7. Изменить координаты элемента, если изменился размер кнопки

После того как создался элемент в указанной позиции, во время выполнении анимации позиции сохраняются и при изменении размера кнопки, позиции сохраняются

По умолчанию: resize: false
Тип: boolean

8. Стили элемента

Меняем текущие или добавляем свои стили на созданный элемент

По умолчанию: elem_css

9. Стили кнопки, срабатывают при выполнении клика

По умолчанию: css

10. Изменение классов и название тега для работы

Бывают моменты что у пользователя установлена верстка к классам, к id элементу или тегам с которыми работает плагин, в этом случаи можно это изменить для предотвращения конфликта верстки к плагину:

11. Эффекты замедления для анимации

Применяем различные эффекты, поведения как должен двигаться элемент

В значение "easing" доступно следующий список:

swing

linear

circleblockdropEaseOutQuad

circleblockdropEaseInOutQuad

circleblockdropEaseOutCubic

circleblockdropEaseInOutQuart

circleblockdropEaseOutQuint

circleblockdropEaseOutSine

circleblockdropEaseOutBounce

circleblockdropEaseInCirc

circleblockdropEaseOutCirc

circleblockdropEaseInOutCirc

Если вам нужно еще дополнительные эффекты, то вы можете подгрузить файл "jquery", который дополнит список "easing":

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

И также известен список эффектов, на сайте выполняется демонстрация этих эффектов:

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

Правильное применение опции:

События при выполнении плагина

event - возращаются события кнопки

data - передаются данные кнопки (это могут быть опции которые вы передаете при вызове или данные которые отрабатываются в процессе срабатывания события)

(Событие) Инициализация кнопки:

(Событие) Добавление логики на элемент который еще не создан в кнопке:

(Событие) Создание элемента в кнопке:

(Событие) Если произойдет изменения размера кнопки, при изменении окна браузера, то сработает данное событие:

(Событие) Выполнили клик на кнопку:

(Событие) Завершился клик на кнопку:

(Событие) Выполнение анимации элемента в кнопке:

(Событие) Завершении анимации элемента в кнопке:

(Событие) Изменение опций, при выполнении триггера:

(Триггер) Изменяем опции в кнопки:

(Триггер) Отключение плагина (Разрушать не получиться, только отключаем):