Как в 2025 году вибрануть сайтом
- 3 октября 2025
Шутки в сторону, на кону серьёзная задача — нужно вибрануть сайтом. К счастью, в 2025 году это не очень сложно и нужна поддержка есть. Vibration API поддерживается почти везде, кроме Safari. Конечно, ещё нужно устройство с вибромотором, но тут подойдут почти все телефоны, если есть нужный браузер.
Не будем растягивать эту инструкцию и давайте начнём с базовой страницы (это будет просто кнопка, выровненная по центру.)
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кнопка по центру</title>
</head>
<body>
<button>Нажми меня</button>
</body>
</html>
Ну или ладно, сначала она вообще не по центру. Добавим стили, чтобы кнопка получила цвет и оказалась там, где мы хотим. Вставьте весь этот тег <style> куда-нибудь внутри <head>.
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
button {
padding: 15px 30px;
font-size: 18px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
Чтобы добавить поддержку вибрации, слегка изменим код внутри <body> — добавим скрипт, который проверяет поддержку вибрации и вибрирует.
<body>
<button id="vibrateButton">Нажми меня</button>
<p id="status">Проверка поддержки вибрации...</p>
<script>
const vibrateButton = document.getElementById('vibrateButton');
const statusText = document.getElementById('status');
if ('vibrate' in navigator) {
statusText.textContent = 'Vibration API поддерживается!';
vibrateButton.addEventListener('click', () => {
navigator.vibrate(200); // Вибрация на 200 мс
statusText.textContent = 'Устройство завибрировало!';
});
} else {
vibrateButton.disabled = true;
statusText.textContent = 'Vibration API не поддерживается.';
}
</script>
</body>
И всё!
Есть, конечно, нюанс. В теории с поддержкой всё хорошо, а на практике при проверке у редакции на Андроид-смартфоне вибрация поддерживается в Chrome и Яндекс-браузере, а в Firefox не работает (хотя на CanIUse и написано обратное).
Но теперь, если вы хотите клёво вибрануть телефоном в ответ на реакцию в каком-нибудь чатике, вы точно знаете, что делать.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.