Подробно можно узнать о модуле на сайте: https://divleaf.ru/ru/circleblockdrop

Разработчик плагина Divleaf.ru (Nikolay)

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

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

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

Пример 1.

$.circleblockdrop('.button', {
   // options
});

Пример 2.

$.circleblockdrop('.button2, .button', {
   // options
});

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

Пример 1.

$('.button1').circleblockdrop({
   // options
});

Пример 2.

$(this).circleblockdrop({
   // options
});

2. Опции

Добавляем что-то внутрь элемента, например картинку или символ:

{
   elem_in_html: ''
}

Начальный размер элемента:

{
   elem_begin_width: 0.5,
   elem_begin_height: 0.5
}

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

{
  resize: true
}

Позиционирование элемента:

{
   align: 'left, top'
}

Удалить предыдущие элементы:

{
   stack: true
}

Начальная задержка элемента:

{
   speed_delay: 30
}

Скорость элемента:

{
   speed: 300
}

3. Изменяем стили для кнопки или элемента которое выводится в кнопке

Изменяем стили кнопки:

{
   style: {
      css: { 
         'position': 'relative', 
         'overflow': 'hidden', 
         'z-index': 1, 
         'display': 'block'
      }
   }
}

Изменяем стили элемента в кнопке:

{
   style: {
      elem_css: { 
         'position': 'absolute', 
         'background': 'rgba(255, 255, 255, 0.50)', 
         'border-radius': '100%', 
         'z-index': '-1', 
         'pointer-events': 'none', 
         'opacity': '0', 
         '-webkit-transition': 'background 0.3s', 
         '-moz-transition': 'background 0.3s', 
         '-o-transition': 'background 0.3s', 
         'transition': 'background 0.3s'
      }
   }
}

4. Изменяем классы или ид, если у вас есть конфликт с версткой, чтобы ид и классы были разными

Класс для кнопки:

{
   class: 'circleblockdrop-block'
}

Название тега элемента:

{
   elem_name_tag: 'span'
}

Ид для элемента:

{
   elem_id: 'circleblockdrop-elem'
}

Класс для элемента:

{
   elem_class: 'circleblockdrop-elem'
}

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

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

{
   animate: {
      easing: 'swing'
   }
}

В значение "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/

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

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

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

$('.button').on('circleblockdrop-init', function (event, data) {
    console.log(data);
})

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

$('.button').on('circleblockdrop-add', function (event, data) {
    console.log(data);
})

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

$('.button').on('circleblockdrop-create', function (event, data) {
    console.log(data);
});

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

$('.button').on('circleblockdrop-resize', function (event, data) {
    console.log(data);
});

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

$('.button').on('circleblockdrop-click', function (event, data) {
    console.log(data);
});

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

$('.button').on('circleblockdrop-click-end', function (event, data) {
    console.log(data);
});

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

$('.button').on('circleblockdrop-animate-step', function (event, data) {
    console.log(data);
});

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

$('.button').on('circleblockdrop-animate-complete', function (event, data) {
    console.log(data);
});

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

$('.button').on('circleblockdrop-update-options', function (event, data) {
    console.log(data);
});

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

$('.button').trigger('circleblockdrop-update-options', {
    // ... new options
});

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

$('.button').trigger('circleblockdrop-turnoff', true); // Отключить
// Или 
$('.button').trigger('circleblockdrop-turnoff', false); // Включить