Плагин circleblockdrop на javascript работающий на jquery
Вернуться назад
22

Плагин circleblockdrop на javascript работающий на jquery

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

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

Скачать плагин circleblockdrop архивом:

[инфа о файлах]

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

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

Сможете сами проверить:


Список Опций
1. Отмена предыдущей анимации:

1) На второй кнопке добавляет отмену созданной предыдущей анимации (пропадает предыдущий круг)

По умолчанию: stack: true
stack: false
stack (тип boolean)
2. Скорость работы анимации:

1) С какой скоростью будет увеличиваться текущий круг

По умолчанию: speed: 600
speed: 3000
speed (тип integer)
3. Скорость задержки в начале выполнения:

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

По умолчанию: speedDelay: 0
speedDelay: 300
speedDelay (тип integer)
4. Размер появившегося круга:

1) Указываем начальный размер круга при появлении

По умолчанию: elemBeginWidth: 5
elemBeginWidth: 30
elemBeginWidth (тип integer) в px
По умолчанию: elemBeginHeight: 5
elemBeginHeight: 30
elemBeginHeight (тип integer) в px
5. Зафиксировать положение круга:

1) Зафиксировать появившегося круга в указанных положениях

По умолчанию: align: 'none'
align: 'left, top'
align (тип string)

Есть список которые принимает свойство align:

none - Отменить выравнивание
left - Выравнивание по левой части
top - Выравнивание по верхней части
right - Выравнивание по правой части
bottom - Выравнивание по нижней части
center - Выравнивание по сентру
centerLeft - Выравнивание по сентру левой части
centerRight - Выравнивание по сентру правой части
centerTop - Выравнивание по сентру верхней части
centerBottom - Выравнивание по сентру нижней части
6. Выводим внутри появившегося круга:

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

По умолчанию: 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 (тип string)
7. Меняем положение текущего круга при смене размера экрана:

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

По умолчанию: resize: false
resize: true
resize (тип boolean)
8. меняем стили круга (цвет, и другое):

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

По умолчанию: elemCss
elemCss:
elemCss (тип json)
9. Можно менять стили к базовому блоку:

1) Базовый блок это блок в котором выводятся круги, и на базовый блок применяются стили

По умолчанию: css
сss (тип json)
10. Обновление плагина настроек:

1) Если изменили настройку то в этом случаи есть функция которая обнавляет плагин resizeFun:


 
11. Изменение настройки (изменение опций):

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


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

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


 
Лицензия:
MIT
создано:
05.11.2020
обновлено:
02.12.2023
автор:
admin
Теги
yandex metrika