Ripple Эффект для ссылок и кнопок при нажатии


Красивый эффект при нажатии на кнопки либо ссылки в виде волн.
JS плагин Rippler. Очень легко устанавливается. А для подключения к ссылке либо кнопке добавляем класс

Установка (В шаблон DLE)
1. Скачиваем архив rippler-master.zip  с плагином и распаковываем.
2. Закидываем файлы .js и .css в соответствующие папки.
3. В main.tpl подключаем эти самые файлы
4. Папку svg кидаем в корень шаблона

//перед </head>
<link rel="stylesheet" href="/templates/FDv2/css/rippler.css">
// перед </body>
<script src="/templates/FDv2/js/jquery.rippler.js"></script>

Инициализируем плагин так же в файле main.tpl 
<script>
$(document).ready(function() {
  $(".rippler").rippler({
    effectClass      :  'rippler-effect'
    ,effectSize      :  16      
    ,addElement      :  'div' 
    ,duration        :  400
  });
});
</script>

Примеры использования
Кнопки
<a class="btn btn-default rippler rippler-inverse" href="#"> Инверсия </a>
<button class="btn btn-primary rippler rippler-default"> Дефолт </button>
<a class="btn btn-success rippler rippler-inverse" href="#"> Инверсия </a>
<a class="btn btn-info rippler rippler-default" href="#"> Дефолт </a>
<a class="btn btn-warning btn-lg rippler rippler-inverse" href="#"> Инверсия </a>
<a class="btn btn-danger btn-lg rippler rippler-default" href="#"> Дефолт </a>

Ссылки
<a class="btn btn-link rippler rippler-bs-primary" href="#">...</a>
<a class="btn btn-link rippler rippler-bs-success" href="#">...</a>
<a class="btn btn-link rippler rippler-bs-info" href="#">...</a>
<a class="btn btn-link btn-lg rippler rippler-bs-warning" href="#">...</a>
<a class="btn btn-link btn-lg rippler rippler-bs-danger" href="#">...</a>

Так же данный плагин можно использовать и для изображений.
<span class="rippler rippler-img rippler-bs-primary">
  <img src="image.jpg">
</span>
<span class="rippler rippler-img rippler-circle-mask rippler-bs-success">
  <img src="image.jpg">
</span>

Демо / Источник /скачать dle 11.1смотреть фильмы бесплатно


js ripple plugin эффект
Комментариев 3
  1. Юрка

    Подключил все как тут написано, но ничего не сработало (

    1. Stanislavskiy11 Админ Ответ

      Вставьте код инициализации в самый верх после </head>

      1. Юрка Ответ
        О! Спасибо, заработало

Информация