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 |
Убирает слушатели событий |