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

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

Установка (В шаблон DLE)
1. Скачиваем архив rippler-master.zip  с плагином и распаковываем.
2. Закидываем файлы .js и .css в соответствующие папки.
3. В main.tpl подключаем эти самые файлы
4. Папку svg кидаем в корень шаблона
//перед </head>
<link rel="stylesheet" href="/templates/fd/css/rippler.css">
// перед </body>
<script src="/templates/fd/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смотреть фильмы бесплатно
AOS Анимация при прокручивании (скролле) страницы
AOS Анимация при прокручивании (скролле) страницы
26-01-2017, 08:57, Плагины
Адаптивные и лёгкие модальные окна ReModal
Адаптивные и лёгкие модальные окна ReModal
12-01-2017, 10:18, JavaScript
  1. Юрка

    Юрка @Юрка 20 мая 2017 00:07

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

    1. Stanislavskiy11

      Stanislavskiy11 @Грандмастер 20 мая 2017 10:04

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

    2. Юрка

      Юрка @Юрка 23 мая 2017 12:31

      О! Спасибо, заработало

  2. warezsoft2015

    warezsoft2015 15 мая 2019 18:42

    супер   smile 

{login}

Твой комментарий..

Имя:*
E-Mail:
Loading...

Настраиваем новый дизайн
Некоторые страницы и функции могут быть недоступны!

Loading...

Настоятельно рекомендуем ознакомиться с информацией по ссылке ниже.

Сайт мошенников

Ваша реклама

fordleru@mail.ru
Loading...

Нашли ошибку?
Вы можете сообщить об этом администрации.
Выделив текст нажмите CTRL+Enter