Эффект пульсации при клике с помощью CSS3 и jQuery
Материальный дизайн (Material Design) от компании Google, в котором анимации не просто оживляют интерфейс, но и представляют пользователю, что происходит. Завораживающие идеи о трехмерном пространстве не оставили равнодушными большую часть сообщества веб-разработчиков и дизайнеров всех мастей.
Фрейморки использующие принципы материального дизайна выходят в свет один за одним и используются не только для унификации интерфейсов приложений ОС Андроид, но для разработки элементов интерфейса веб-сайтов.
Многие фичи из состава материального дизайна можно очень даже просто воспроизвести у себя на сайте и без подключения фреймворков. Что я сегодня вам и продемонстрирую, на примере реализации эффекта пульсации (ripple), или если хотите, эффекта расходящихся кругов на воде(ряби), при клике на любой части страницы.
Для этого нам понадобится: заблаговременно подключенная библиотека javascript jQuery, небольшой плагин для запуска эффекта и немного магии CSS3-анимации.
Начнём с рассмотрения кода CSS, сформируем стили и настроим анимацию @keyframes.
CSS
Для тега <html> обозначим высоту документа в 100%.
html { height:100%; } |
Далее сформируем стили самого эффекта. Краткие комментарии к коду, помогут быстрее разобраться что к чему:
.ripple { position: relative; overflow: hidden; -webkit-transform: translate(0); } /* параметры визуального элемента эффекта */ .effekt { display: block; position: absolute; pointer-events: none; /* абсолютно круглый */ border-radius: 50%; /* Увеличение или уменьшение размера элемента */ transform: scale(0); /* располагаем выше других объектов веб-страницы */ z-index:9999; /* цвет фона элемента */ background: rgba(52, 152, 219,.7); /* не прозрачный */ opacity: 1; } /* имя, длительность и изменение скорости анимации */ .effekt.replay { -webkit-animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1); -o-animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1); animation: ripple 2s cubic-bezier(0.165, 0.85, 0.45, 1); } |
Теперь подготовим анимацию для разных браузеров используя префиксы, имя анимации, как мы помним ripple:
@keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @-webkit-keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @-moz-keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @-ms-keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @-o-keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } |
На стороне CSS мы всё подготовили, остаётся подключить библиотеку jQuery к документу, если вы ещё этого не сделали. В примере, подключил библиотеку напрямую из Google CDN, перед закрывающим тегом
достаточно разместить следующую строку:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
Далее запускаем небольшой плагин, в котором определяем, для какого элемента будет воспроизведён эффект, в нашем случае это вся видимая часть страницы html. Для видимой части эффекта используем тег с соответствующим классом.
Регулировать диаметр расходящегося круга, вы можете изменяя значения height: d/5, width: d/5. Только следует помнить, что уменьшая значения вы увеличиваете диаметр круга, а увеличивая, наоборот уменьшаете. Вот такая круговерть))). Привычнее указывать равнозначные величины в пикселях, например height: 150 и width: 150, что собственно вы можете и делать. Больше в плагине, особо настраивать и нечего.
<script type="text/javascript"> // Объект для которого будет применён эффект $("html").click(function(e){ var ripple = $(this); // визуальный элемент эффекта if(ripple.find(".effekt").length == 0) { ripple.append("<span class='effekt'></span>"); } var efekt = ripple.find(".effekt"); efekt.removeClass("replay"); if(!efekt.height() && !efekt.width()) { var d = Math.max(ripple.outerWidth(), ripple.outerHeight()); efekt.css({height: d/5, width: d/5});// Определяем размеры элемента эффекта } var x = e.pageX - ripple.offset().left - efekt.width()/2; var y = e.pageY - ripple.offset().top - efekt.height()/2; efekt.css({ top: y+'px', left:x+'px' }).addClass("replay"); }) </script> |
Если всё сделаете правильно, получите в своё распоряжение ещё одну замечательную дизайнерскую фишку. Такой эффект, вы можете применять к любым блочным элементам вашего сайта, для этого достаточно его указать в исполняемом js. Например, вы хотите применить ripple-эффект к div-контейнеру с содержанием статей, который имеет класс content допустим. В jQuery плагине определяете функцию именно для этого элемента. Тогда, если применительно к нашему примеру, $("html") заменяете на $("div.content"), первая строка в коде плагина будет выглядеть так:
$("div.content").click(function(e)
Кнопки и другие активные элементы работают с эффектом по тому же принципу.
Ещё раз посмотрите живой пример работы плагина и при желании, смело забирайте исходники.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Здравствуйте!
Не подскажите, попробовал применить этот эффект к меню сайта — прописываю $(«$NMENU_1$»).click (function (e), а в ответ тишина.
Проверял просто на работоспособность у себя, прописывая Html — работает, а с меню не хочет. Или надо не $NMENU_1$ вставлять, а что-то другое?
У вашего меню наверняка есть class или id вот что либо из этого и прописывайте,
$(".class").click(function(e)$("#id").click(function(e)а если вы используете тег
<menu>, то просто пишете$("menu").click(function(e)В принципе в конце статьи всё расписано, как применять эффект к другим элементам страницы