Эффект ряби привлечет внимание и поможет увеличить кликабельность элемента сайта: кнопки, области и т.д. Сделаем кнопку как в сервисе 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();
}); 
