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


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

467
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 25
Скрипты и модификации для Ucoz 2109
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • На наш фактически play list smile
  • na3uTuB4uk94 написал:
  • Ну а в целом кстати ниче так получилось, очень даже хорошо)
  • na3uTuB4uk94 написал:
  • Ну музыка на демо конечно не для слушателей которым не 18+ да и просто не очень музыка если честно)
  • Вовчик написал:
  • Ничего себе, а я всего 8 лет на uCoz happy
  • Fox написал:
  • Спасибо, я 11-ый год на uCoz и Ваша форма добавления мне очень понравилась =)
    Последние темы
    Опрос
    223
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: