Ripple effect

Установка

npm install @qpokychuk/ripple --save

Основа использования

import ripple from '@qpokychuk/ripple';
import '@qpokychuk/ripple/index.css';

ripple.init()
ripple.attach('.btn')
ripple.attach('.waved')

ripple.deAttach('.btn-text') // example class="btn btn-text"

ripple.destroy()

Пользовательские стили

Вы можете редактировать эффект с помощью css

.ripple{
    background: radial-gradient(rgba(255, 255, 255, 0.1) 0,
        rgba(255, 255, 255, 0.2) 40%,
        rgba(255, 255, 255, 0.2) calc(60% - 10px),
        rgba(255, 255, 255, 0.2) 60%,
        rgba(0, 0, 0, 0) calc(60% + 10px));
}

| Функция | Аргумент | Описание | |---|---|---| | init | | Вешает слушатели событий | | attach | selector:string | Добавляет эффект для селектора | | deAttach | selector:string | Убирает эффект для селектора | | destroy | | Убирает слушатели событий |

Поддержать автора