Эффект пульсации при клике с помощью CSS3 и jQuery


Эффект пульсации при клике с помощью CSS3 и jQuery

395
10 из 10
Проголосовало: 6






Материальный дизайн (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="https://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)

Кнопки и другие активные элементы работают с эффектом по тому же принципу.

p.s. демо в архиве
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://dbmast.ru/
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    404
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 8
    Гостей: 8
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: