/ Сайтостроение / Дизайн / Эффект ряби

Эффект ряби

29.10.2017

514


  • Warning: Use of undefined constant html - assumed 'html' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 42

    Warning: Use of undefined constant css - assumed 'css' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 43

    Warning: Use of undefined constant script - assumed 'script' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 44

    Warning: Use of undefined constant primer - assumed 'primer' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 45

  • Warning: Use of undefined constant video - assumed 'video' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 46

Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Эффект ряби привлечет внимание и поможет увеличить кликабельность элемента сайта: кнопки, области и т.д. Сделаем кнопку как в сервисе Call Hunter.

Чистый эффект ряби

Сам эффект ряби создан на чистом CSS, но чтобы он применялся нужно делать js-событие.

#container {position: relative; height: 100%; width: 100%; overflow: hidden;}

.dot {
  height: 2px;
  width: 2px;
  border-radius: 100%;
  position: absolute;
  z-index: 9;
  animation: sploosh 3s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: transparent;
}

@keyframes sploosh {
  0% {
    box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
    background: rgba(66, 166, 223, 0.7);
  }
  100% {
    box-shadow: 0 0 0 150px rgba(66, 166, 223, 0);
    background: rgba(66, 166, 223, 0);
  }
}
$(document).ready(function(){  
 
    $('#container').on('mousedown',function(e) {
      var left = e.pageX;
      var top = e.pageY;

      $(this).append('
') setTimeout(function(){ $('#container .dot:first-of-type').remove(); },3000); }); });

Скрипт prefixfree.min обрабатывает свойства CSS3 и адаптирует их ко всем браузерам. Можно подключать для подобных решений

Данный скрипт работает в области #container и срабатывает в том месте, где произошел клик. Радиус эффект можно контролировать свойством box-shadow: 0 0 0 150px rgba(66, 166, 223, 0);

Кнопка с эффектом ряби

Сделаем кнопку по типу как у Call Hunter, чтобы от нее периодически исходила рябь. В данном случае в скрипте мы не отлавливаем координаты, и в CSS прописываем точные параметры смещения.

#call-hunter {position: fixed; width: 80px; right: 5%; bottom: 10%;}

#call-hunter a {
    background: #2196F3;
    color: #fff;
    text-decoration: none;
    position: fixed;
    z-index: 999;
    line-height: 80px;
    width: 80px;
    text-align: center;
    border-radius: 80px;
    bottom: 10%;
}

.dot {
  height: 2px;
  width: 2px;
  border-radius: 100%;
  position: absolute;
  z-index: 9;
  animation: sploosh 3s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: transparent;
  left: 40px;
  bottom: 40px;
}

@keyframes sploosh {
  0% {
    box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
    background: rgba(66, 166, 223, 0.7);
  }
  100% {
    box-shadow: 0 0 0 100px rgba(66, 166, 223, 0);
    background: rgba(66, 166, 223, 0);
  }
}
$(document).ready(function(){  
 
    // Оставить если нужен эффект при нажатии
    $('#call-hunter').on('mousedown',function(e) {

      $(this).append('
') setTimeout(function(){ $('#call-hunter .dot:first-of-type').remove(); },3000); }); // Повторяющийся эффект setInterval(function(){ $('#call-hunter').append('
'); setTimeout(function(){ $('#call-hunter .dot').remove(); },3000) },6000); });

Сама кнопка это div c ID call-hunter c прописанной ссылкой внутри:

<div id="call-hunter"><a href="#">Call</a></div>

В десктопной версии можно прицепить к этой кнопке мини форму обратного звонка. В мобильной версии можно сделать вызов при нажатии.

Развод на кнопке при нажатии

Нашел еще один неплохой эффект при нажатии на кнопку на чистом CSS

button {position: relative; overflow: hidden;}

button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

button:focus:not(:active)::after {animation: ripple 1s ease-out;}

Заполнение контейнера цветом

Можно сделать классный эффект заполнения блока цветом из центра. Само событие можно повесить при загрузке страницы (если на верхнем экране), либо при появлении на экране.

setTimeout(function(){ jQuery('#main-block').addClass('ripple'); }, 1000);

Стили CSS

#main-block {overflow:hidden;}

#main-block:after {
	content: "";
	position: absolute;
	background: #B17461;
	top: 50%;
	left: 50%;
	width: 1%;
	height: 2%;
	margin-top: -1%;
	border-radius: 100%;
	transform: scale(0);
	z-index: -9;
	-o-transition: all 2.0s;
	transition: all 2.0s ease;
	-webkit-transition: all 2.0s ease 0s;
}

#main-block.ripple:after {
	top: 0;
	left: 0;
	width: 120%;
	margin-left: -10%;
	height: 240%;
	margin-top: -30%;
	transform: scale(1);
}


Warning: Use of undefined constant html - assumed 'html' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 51

Warning: Use of undefined constant css - assumed 'css' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 52

Warning: Use of undefined constant script - assumed 'script' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 53

Warning: Use of undefined constant primer - assumed 'primer' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 54

Warning: Use of undefined constant video - assumed 'video' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 55
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Эффект ряби
Установка шрифтов
Рекомендации для васУстановка шрифтовOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.