var ripple = $('.ripple'), // "капля"
rippleSize = screenProp(), // размер капли
posLeft = 0,
posTop = 0;
ripple.outerWidth(rippleSize * 2).outerHeight(rippleSize * 2); // задаем капле размер в 2 раза больше размера экрана, чтобы "покрыть" всю видимую область страницы
$('.gradient').click(function(e) { // клик на градиент
$('body').addClass('fixed'); // блокируем прокрутку экрана
posLeft = e.pageX - rippleSize - $(window).scrollLeft(); // положение капли слева
posTop = e.pageY - rippleSize - $(window).scrollTop(); // положение капли сверху
var gradient = $(this).attr('data-gradient-css'); // получаем код градиента
ripple.addClass('ripple--active').css({ // добавляем класс для увеличения и прописываем стили
'left': posLeft + 'px',
'top': posTop + 'px',
'background-image': gradient
});
setTimeout(function() { // после увеличения
ripple.addClass('ripple--complete'); // добавляем класс, который выровнит каплю точно по краям экрана
}, 500); // время анимации увеличения
});
ripple.on('click', function() { // при клике на каплю
if (ripple.hasClass('ripple--complete')) { // если анимация закончилась
$('body').removeClass('fixed'); // возвращаем странице прокрутку
ripple.removeClass('ripple--complete ripple--active'); // удаляем классы
}
});
$(window).on('resize', function() { // при ресайзе окна
rippleSize = screenProp(); // пересчитываем размер капли
ripple.outerWidth(rippleSize * 2).outerHeight(rippleSize * 2); // и задаем ей полученные значения
});
// функция для определения максимального значения из высоты и ширины экрана
function screenProp() {
if ($(window).width() > $(window).height()) {
return $(window).width();
} else {
return $(window).height();
}
}
html,
body {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
overflow-y: auto;
}
body.fixed {
overflow: hidden;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
.block {
width: 31%;
margin: 0 1%;
background: #fff;
border-radius: 10px;
padding: 20px;
}
.gradient {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 100%;
background: #000;
cursor: url(https://i.imgur.com/wz8iY4B.png) 16 16, pointer;
}
.ripple {
width: 200%;
height: 200%;
position: fixed;
z-index: 9999;
transition: transform .5s linear;
transform: scale(0);
transform-origin: center;
border-radius: 100%;
cursor: url(https://i.imgur.com/NRHTafk.png) 16 16, crosshair;
}
.ripple--active {
transform: scale(1);
}
.ripple--complete {
left: 0!important;
top: 0!important;
width: 100%!important;
height: 100%!important;
border-radius: 0!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="block">
<div class="gradient" style="background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);" data-gradient-css="linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)"></div>
</div>
<div class="block">
<div class="gradient" style="background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);" data-gradient-css="linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)"></div>
</div>
<div class="block">
<div class="gradient" style="background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);" data-gradient-css="linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%)"></div>
</div>
<div class="block">
<div class="gradient" style="background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);" data-gradient-css="linear-gradient(to right, #ffecd2 0%, #fcb69f 100%)"></div>
</div>
<div class="block">
<div class="gradient" style="background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);" data-gradient-css="linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)"></div>
</div>
<div class="block">
<div class="gradient" style="background-image: linear-gradient(120deg, rgb(132, 250, 176) 0%, rgb(143, 211, 244) 100%);" data-gradient-css="linear-gradient(120deg, rgb(132, 250, 176) 0%, rgb(143, 211, 244) 100%)"></div>
</div>
</div>
<div class="ripple"></div>