Click-effect для ссылок и не только

1838 просмотров Alan_Writer 08.01.2017

Скачать 📥 Демо ▶️

Думаю многие на некоторых сайтах, или даже программах, стали наблюдать в последнее время такой эффект, когда при нажатии на кнопки или другие элементы, они на какой-то момент не просто сразу и полностью меняют свой цвет, а внутри этого элемента, вокруг той точки куда ты нажимаешь - будто проходит круговая волна, плавно заполняющая его градиентом и затем так-же плавно исчезающая. Выглядит довольно интересно, но как это называется не знаю, поэтому пользуюсь логикой, условно назовем click-effect или action-effect. Сейчас это явно один из трендов в веб-дизайне, поэтому я решил найти нечто подобное, но чтоб было максимально просто в плане нагрузки на сайт.

1. Скачиваем архив, и все содержимое заливаем в корень файлового менеджера.

2. В нижней части сайта, на всех необходимых страницах - где будут использоваться эти кнопки, указываем пути к стилям и скрипту:
Код
<link rel="stylesheet" href="/css/inkdrops.css"></link>
<script src="/js/ink.js"></script>

Так-же, если у вас не uCoz, стоит помнить о библиотеке jQuery.

3. Собственно это и вся установка, теперь чтоб применить этот эффект к ссылкам, или к любым другим блокам, нужно прописывать их следующим образом:
Код
<a class="inkMe" ink-color="#000">Текст ссылки</a>

С помощью ink-color="#000" - задаем цвет эффекта.

Теги: Click-effect, link hover effect, action-effect
0 Комментариев