2

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

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

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

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

function playSound () {
    document.getElementById('play').play();
}
<audio id="play" src="http://www.soundjay.com/button/beep-07.wav"></audio>

<button onclick="playSound()">Play</button>

3
  • Вы замечаете, что нажатие и отпускание кнопки мыши на этом сайте сопровождается немного разными звуками, хотя очень похожими. Я бы вместо одного события onclick применил соответстсвенно два события - onmousedown и onmouseup с разными звуками. (фрагментами sounds.mp3) А onclick вообще звучит в момент отпускания.
    – Опан
    25 апр 2018 в 14:17
  • @Олег не один и тот же звук был можете сами посмотреть в аудиозаписей там только один звук клика
    – Randall
    25 апр 2018 в 18:42
  • Я на слух обнаружил два звука, они в самом начале файла sounds.mp3 и очень быстро идут один за другим, если слушать всё подряд.
    – Опан
    25 апр 2018 в 19:17

3 ответа 3

5

Вот 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor"></div>
<button>cllck</button>

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

5
  • Красиво реализовал. Но у меня ничего не тормозит... Держи плюс...
    – Air
    25 апр 2018 в 6:20
  • @Air да он прав сайт тормозит дико
    – Randall
    25 апр 2018 в 7:23
  • спасибо большое вам также плюсик от меня.но подскажите где вы нашли звук то есть каким образом нашли ?
    – Randall
    25 апр 2018 в 7:23
  • @Spectr Я открыл DevTools, во вкладке Network нашел загруженный звуковой файл. Они грузят его через AJAX, поэтому тип у него XHR. 25 апр 2018 в 7:38
  • @StepanKasyanenko спасибо
    – Randall
    25 апр 2018 в 9:51
4

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

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();
}
Покликайте здесь.
<audio id=audio_down></audio>
<audio id=audio_up></audio>

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

1
  • Спасибо +1 от меня отлично
    – Randall
    25 апр 2018 в 19:24
1

Когда-то я делал 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;
}
<div id=contayner> Кликните здесь.</div>

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

2
  • скучный эффект очень медленно все происходит.Но ответ не стирайте потом посмотрю ваш код анализирую постараюсь понять что к чему
    – Randall
    26 апр 2018 в 20:05
  • 1
    Увеличив переменную step можно сделать быстрее.
    – Опан
    26 апр 2018 в 20:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.