Эффект по кнопке от мышки при клике (jQuery) Как? [закрыт]

246
19 октября 2021, 14:20
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 1 год назад.

Улучшить вопрос

Я не знаю как называется такой эффект но при клике на кнопку\ссылку (тег короче) нужно что бы по кнопке от мышки проходил эффект заполнения кнопки от мышки до краёв

Пример: ютуб, кнопка войти ы ютубе

по кнопке постепенно от клика до краёв идёт заполнение ещё пример, десктопная версия телеграма, там почти все кнопки сделаны так

кругом как бы заполняется кнопка есть один весьма наглядный пример - https://dwstroy.ru/lessons/les3601/demo/index.html#

нужно примерно так но что бы круг-волна не перекрывал текст и не делать hover я честно понятия не имею как это можно реализовать

так же обязательно что бы эффект происходил при клике мышкой но не при отрыве мышки после клика

именно такие кнопки предлагает материал ui но мне нужен пример чистой реализации

Answer 1

$(document).on('click', '.waves', function(e) { 
    if ($(this).hasClass('disabled')) return; 
 
    const offset = $(this).offset(); 
 
    const eventX = e.pageX - offset.left; 
    const eventY = e.pageY - offset.top; 
 
    const diameter = Math.min(this.offsetHeight, this.offsetWidth, 50); 
 
    const ripple = $('<div/>', {class: "wavesWrapper", appendTo: $(this)}); 
 
    $('<div/>', { 
        class: "wavesEffect", 
        css: { 
            width: diameter, 
            height: diameter, 
            left: eventX - (diameter / 2), 
            top: eventY - (diameter / 2), 
        }, 
        appendTo: ripple, 
        one: { 
            animationend: function () { 
                ripple.remove(); 
            } 
        } 
    }); 
});
body { 
	min-height: 100vh; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
} 
 
.btn { 
	display: inline-block; 
	border: 1px solid #ccc; 
	padding: 18px 40px; 
	cursor: pointer; 
	margin: 10px; 
	user-select: none; 
	text-align: center; 
} 
 
.btn.btn-dark { 
	background-color: #2c3e50; 
	color: #fff; 
} 
 
.btn.btn-red { 
	background-color: #e74c3c; 
	color: #fff; 
} 
 
.btn.btn-blue { 
	background-color: #3498db; 
} 
 
.btn.btn-block { 
	display: block; 
} 
 
.waves { 
	position: relative; 
} 
 
.waves .wavesWrapper { 
	position: absolute; 
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0; 
	overflow: hidden; 
	transform: translateZ(0); 
	border-radius: inherit; 
	pointer-events: none; 
	animation: waves-shadow 2s ease; 
} 
 
.waves .wavesEffect { 
	backface-visibility: hidden; 
	position: absolute; 
	border-radius: 50%; 
	transform: scale(0.7); 
	background-color: #e74c3c; 
	opacity: 0.4; 
	animation: waves 2s; 
} 
 
.waves.waves-dark .wavesEffect { 
	background-color: #000; 
} 
 
.waves.waves-light .wavesEffect { 
	background-color: #fff; 
} 
 
.waves.waves-darken .wavesEffect { 
	background-color: rgba(0, 0, 0, 0.2); 
} 
 
.waves.waves-without-shadow .wavesWrapper { 
	animation: none; 
} 
 
@keyframes waves-shadow { 
	0% { 
		box-shadow: 0 0 0 transparent; 
	} 
 
	20% { 
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); 
	} 
 
	100% { 
		box-shadow: 0 0 0 transparent; 
	} 
} 
 
@keyframes waves { 
	to { 
		transform: scale(10); 
		opacity: 0; 
	} 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="wrapper"> 
	<div class="btn btn-dark waves waves-light">BUTTON</div> 
	<div class="btn btn-red waves waves-dark">BUTTON</div> 
	<div class="btn waves">BUTTON</div> 
	<div class="btn btn-block btn-dark waves waves-light">BUTTON</div> 
	<div class="btn btn-block btn-red waves waves-dark">BUTTON</div> 
	<div class="btn btn-block waves">BUTTON</div> 
</div>

Я давно делал вот так.

Прикладываю SASS: CodeOpen

.wavesWrapper - обертка. .wavesEffect - сам эффект, круг.

.wavesWrapper animataion - анимация тени на элементе, можно убрать. .wavesEffect animation - анимация увеличения круга, можно ускорить или замедлить анимацию, плюс можно в @keyframes увеличить размер scale() чтобы круг покрывал элемент полностью.

Да вроде там в примере все есть, некоторые заделки под разные цвета, поэтому кастомизируйте под себя.

Answer 2

var buttons = document.getElementsByClassName('butt'), 
  forEach = Array.prototype.forEach; 
 
forEach.call(buttons, function(b) { 
  b.addEventListener('click', addElement); 
}); 
 
function addElement(e) { 
  var addDiv = document.createElement('div'), 
    mValue = Math.max(this.clientWidth, this.clientHeight), 
    rect = this.getBoundingClientRect(); 
  sDiv = addDiv.style, 
    px = 'px'; 
 
  sDiv.width = sDiv.height = mValue + px; 
  sDiv.left = e.clientX - rect.left - (mValue / 2) + px; 
  sDiv.top = e.clientY - rect.top - (mValue / 2) + px; 
 
  addDiv.classList.add('pulse'); 
  this.appendChild(addDiv); 
}
.dws { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
} 
 
.butt { 
  border: 3px solid #218294; 
  font-size: 30px; 
  color: #218294; 
  text-decoration: none; 
  text-transform: uppercase; 
  width: 250px; 
  height: 60px; 
  display: block; 
  text-align: center; 
  line-height: 60px; 
  font-family: Arial, sans-serif; 
  position: relative; 
  transition: .5s; 
  overflow: hidden; 
} 
 
.butt::before, 
.butt::after { 
  position: absolute; 
  content: ''; 
  width: 100%; 
  height: 100%; 
  background: #218294; 
  top: 0; 
  left: -100%; 
  opacity: .5; 
  transition: .3s; 
  z-index: -1; 
} 
 
.butt::after { 
  opacity: 1; 
  transition-delay: .2s; 
} 
 
.butt:hover { 
  color: #fff; 
} 
 
.butt:hover::before, 
.butt:hover::after { 
  left: 0; 
} 
 
.pulse { 
  background-color: aqua; 
  border-radius: 50%; 
  animation: pulse 0.7s ease-out; 
  transform: scale(0); 
  position: absolute; 
} 
 
@keyframes pulse { 
  to { 
    transform: scale(2); 
    background-color: #fff; 
    opacity: 0; 
  } 
}
<div class="dws"> 
  <a href="#" class="butt">button</a> 
</div>

READ ALSO
Получить значение из Redux Store
javascript

Получить значение из Redux Store

Есть movie reducer

 145
Помогите решить две задачи на JS [закрыт]
javascript

Помогите решить две задачи на JS [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

 179
Стоит ли делать единую функцию обработки ajax запросов?
javascript

Стоит ли делать единую функцию обработки ajax запросов?

У меня есть длинный основной файл JS и все множество блоков кода где данные подгружаются через AJAx

 106
Как передать в конвертор значение переменной?
c#

Как передать в конвертор значение переменной?

У меня в таблице (WPF DataGrid) строки в зависимости от ряда условий должны иметь свойство IsEnabled True или FalseДля анализа условий написал простенький...

 257