Подскажите как сделать такой cursor эффект при клике со звуком

#javascript #jquery #svg #canvas

Недавно на просторах интернета нашел один замечательный сайт в дизайн и работу фронт-эндера
которого я влюбился.

Мне очень понравился там эффект курсора после полной загрузки страницы.

При клике на любом месте страницы создается звук и wave эффект.

Как  можно реализовать такое, подскажите пожалуйста? И возможно ли как-то взять данный
звук клика с этого сайта. Я облазил их консоль и вкладку sources но не нашел ничего.



function playSound () {
    document.getElementById('play').play();
}






    

Ответы

Ответ 1

Вот wave эффект можно сдлеать так.

А звук находится в файле sounds.mp3. 



$(document.body).on('click', function(e) {
  var wave = document.createElement('div');
  wave.style.top = (e.pageY - 25) + "px";
  wave.style.left = (e.pageX - 25) + "px";
  wave.className = 'wave';
  setTimeout(function() {
    wave.classList.add("active");
  }, 0);
  wave.addEventListener("transitionend", function() {
    wave.remove();
  });
  document.body.appendChild(wave);
});

$(document.body).on('mouseout', function(e) {
  cursor.style.display = 'none';
});
$(document.body).on('mousemove', function(e) {
  cursor.style.display = 'block';
  cursor.style.top = (e.pageY - 10) + "px";
  cursor.style.left = (e.pageX - 10) + "px";
});
body {
  background-color: pink;
  width: 100vw;
  height: 100vh;
}

* {
  cursor: none;
}

.wave {
  background-color: white;
  opacity: 0.8;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  transition: all 1s ease;
  position: absolute;
  pointer-events: none;
}

.wave.active {
  transform: scale(3);
  opacity: 0;
}

#cursor {
  background-color: gray;
  opacity: 0.8;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  pointer-events: none;
  display: none;
}







А вообще сайт красивый, но тормозит ужасно.


Ответ 2

Озвучку кликов мыши можно реализовать так:



var audio_down = document.getElementById("audio_down");
var audio_up = document.getElementById("audio_up");
audio_down.src = audio_up.src = "https://geex-arts.com/assets/audio/sounds.mp3";
document.onmousedown = function(){mouseSound(0, audio_down)};
document.onmouseup = function(){mouseSound(0.2, audio_up)};
function mouseSound(startCurrentTime, selectedAudio){
	selectedAudio.currentTime = startCurrentTime;
	setTimeout(function(){selectedAudio.pause()}, 200);
	selectedAudio.play();
}
Покликайте здесь.






Я сначала хотел сделать всё на одном элементе аудио, но оказалось, что с двумя работает
чётче.


Ответ 3

Когда-то я делал wave эффект - после клика на прямоугольном диве от кликнутого места
расходятся разноцветные блоки окружностей, а потом они по одному разу отражаются от
каждой из "внутренних стен" дива:



var step = 1, // Шаг между окружностями и их толщина. (Можно дробное число, будет
интересный эффект.)
num = 50, // Количество окружностей
opacite = 0.3, // Прозрачность окружностей
speed = 50, // Скорость распрастранения окружностей в обратной зависимости
clicked = false,
contayner = document.getElementById("contayner"),
cp = window.getComputedStyle(contayner, null),
w = parseInt(cp.getPropertyValue("width")),
h = parseInt(cp.getPropertyValue("height")),
location_x = parseInt(cp.getPropertyValue("left")),
location_y = parseInt(cp.getPropertyValue("top")),
bw = parseInt(cp.getPropertyValue("border-width"));
for(i = 0; i < num * 5; i++){
	var circle = document.createElement("span");
	circle.id = i;
	contayner.appendChild(circle);
}
contayner.onclick = function(e){
	if(clicked == true){clearInterval(waveInterval)};
	clicked = true;
	var x = e.clientX - location_x - bw;
	var y = e.clientY - location_y - bw;
	var st = 2;
	waveInterval = setInterval (function(){
		for(i=0; i < num; i++){
			var radius = Math.max(st - 1 - i, 0),
			r = 128 + Math.floor(128 * Math.sin(i / 3 + st / 15)),
			g = 128 + Math.floor(128 * Math.sin(i / 5 - st / 15)),
			b = 128 + Math.floor(128 * Math.sin(i / 7 + st / 25)),
			mas = [[x, -x, w * 2 - x, x, x], [y, y, y, -y, h * 2 - y]];
			for(j = 0; j < 5; j++){
				var c = document.getElementById(i + j * num);
				c.style = "border-radius: " + radius * step + "px;" +
					"border-style: solid;" +
					"border-width: " + step + "px;" +
					"border-color: rgba(" + r + ", " + g + ", " + b + ", " + opacite + ")";
				c.style.position = "absolute";
				c.style.width = c.style.height = radius * step * 2 + "px";
				c.style.left = mas[0][j] - radius * step + "px";
				c.style.top = mas[1][j] - radius * step + "px";
			}
		}
		st++;
		if(st > 1000){
			clearInterval(waveInterval);
			clicked = false;
		}
	}, speed);
}
#contayner{
	position: absolute;
	overflow: hidden;
	border-style: solid;
	width: 300px;
	height: 250px;
}
 Кликните здесь.




После любого изменения значений первых четырёх JS-переменных (на против которых есть
комментарии) можно получить новые спец-эффекты. Пока что, после каждого нового клика
все предыдущие круги исчезают.