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

Эффект ряби

HIT

29.10.2017

2342

Эффект ряби привлечет внимание и поможет увеличить кликабельность элемента сайта: кнопки, области и т.д. Сделаем кнопку как в сервисе 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('<div class="dot" style="top: '+top+'px; left: '+left+'px;"> </div>')
      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('<div class="dot"> </div>')
      setTimeout(function(){
        $('#call-hunter .dot:first-of-type').remove();
      },3000);
    }); 
	
    // Повторяющийся эффект
	setInterval(function(){ 
	
		$('#call-hunter').append('<div class="dot"> </div>'); 
		
		setTimeout(function(){
		$('#call-hunter .dot').remove();  
		},3000)

	},6000);
	
});

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

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

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

Доработанные стили

В связи с тем, что эффект в Chrome стал отображаться не корректно, не работало сглаживание углов у самой ряби, доработал стили:

.call-item {position: fixed; z-index: 99; width: 90px; height: 90px; right: 5%; bottom: 50%;}

.call-item a {
    background: #396ae0;
    color: #fff;
    text-decoration: none;
    position: fixed;
    z-index: 999;
    height: 90px;
    width: 90px;
    text-align: center;
    border-radius: 100%;
	cursor: pointer;
}

.call-item a:hover {background: #234db1; color: #fff;}

.call-item i {position: absolute; right: 25px; top: 18px; font-size: 1.6rem;}

.call-item small {
    position: absolute;
    line-height: 14px;
    bottom: 12px;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
}

.dot {
    height: 90px;
    width: 90px;
	position: absolute;
	top: 0;
    border-radius: 100%;
    animation: sploosh 3s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: #2196F3;
}

@keyframes sploosh {
	0% {
		transform: scale(1);
		opacity: 0.7;  
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}


@media screen and (max-device-width: 480px) {
	.call-item {width: 50px; height: 50px;}
	.call-item i {right: 8px; top: 15px; font-size: 1.2rem;}
	.call-item a {width: 50px; height: 50px;}
	.call-item a small {display: none;}
	.dot {width: 50px; height: 50px;}
}

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

Нашел еще один неплохой эффект при нажатии на кнопку на чистом 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);
}

Пример кнопки call hunter на странице, в правом нижнем углу

Waves

Еще одно js-решение. Необходимо подключить небольшие скрипт и стили:

wp_enqueue_script( 'waves', get_template_directory_uri() . '/js/waves.min.js' , array('jquery'), '1.0' , true );

Стили и вовсе я не подключаю а вставляю в свои:

.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:100px;height:100px;margin-top:-50px;margin-left:-50px;opacity:0;background:rgba(0,0,0,.2);background:-webkit-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-o-transition-property:-o-transform,opacity;transition-property:transform,opacity;-webkit-transform:scale(0) translate(0,0);-moz-transform:scale(0) translate(0,0);-ms-transform:scale(0) translate(0,0);-o-transform:scale(0) translate(0,0);transform:scale(0) translate(0,0);pointer-events:none}.waves-effect.waves-light .waves-ripple{background:rgba(255,255,255,.4);background:-webkit-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%)}.waves-effect.waves-classic .waves-ripple{background:rgba(0,0,0,.2)}.waves-effect.waves-classic.waves-light .waves-ripple{background:rgba(255,255,255,.4)}.waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}.waves-button,.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%)}.waves-button,.waves-button-input,.waves-button:hover,.waves-button:visited{white-space:nowrap;vertical-align:middle;cursor:pointer;border:none;outline:0;color:inherit;background-color:rgba(0,0,0,0);font-size:1em;line-height:1em;text-align:center;text-decoration:none;z-index:1}.waves-button{padding:.85em 1.1em;border-radius:.2em}.waves-button-input{margin:0;padding:.85em 1.1em}.waves-input-wrapper{border-radius:.2em;vertical-align:bottom}.waves-input-wrapper.waves-button{padding:0}.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%}.waves-float{-webkit-mask-image:none;-webkit-box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}.waves-float:active{-webkit-box-shadow:0 8px 20px 1px rgba(0,0,0,.3);box-shadow:0 8px 20px 1px rgba(0,0,0,.3)}.waves-block{display:block}

Инициализация (эффект на объект с классом btn)

jQuery(document).ready(function() {
	Waves.attach('.btn');
	Waves.init();
});	

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

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

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

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