Эффект ряби привлечет внимание и поможет увеличить кликабельность элемента сайта: кнопки, области и т.д. Сделаем кнопку как в сервисе 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>
В десктопной версии можно прицепить к этой кнопке мини форму обратного звонка. В мобильной версии можно сделать вызов при нажатии.
Развод на кнопке при нажатии
Нашел еще один неплохой эффект при нажатии на кнопку на чистом 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 на странице, в правом нижнем углу