Улучшите внешний вид вашего сайта: динамический значок с React
Улучшите внешний вид вашего веб-сайта, используя динамический значок с помощью JavaScript.
Проблема: Клиент запросил изменение значка в зависимости от того, открыл ли пользователь иконку. Установить конкретный значок или открыть другую иконку, тогда появляется другой значок.
В итоге иконка будет выглядеть вот так
Когда пользователь находится в приложении:
Когда пользователь находится в другом приложении:
Раскройте потенциал визуальной привлекательности вашего веб-сайта, добавив динамичности к его значку. В этом уроке вы узнаете, как легко изменить значок вашего сайта в зависимости от времени суток с помощью JavaScript. Повысьте свои навыки веб-разработки и предоставьте своим пользователям персонализированный и привлекательный опыт.
Все дело в документе: событие VisibilityChange.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Ret</title>
<script type="module" src="/src/main.jsx"></script>
</head>
<body>
<div id="root"></div>
<script>
// Get the current hour
var currentHour = new Date().getHours();
// Define the day and night icons
var dayIcon = "/day-icon.svg";
var nightIcon = "/night-icon.svg";
// Choose the appropriate icon based on the current hour
var iconPath = currentHour >= 6 && currentHour < 18 ? dayIcon : nightIcon;
// Set the favicon dynamically
var linkElement = document.querySelector("link[rel='icon']");
linkElement.href = iconPath;
</script>
</body>
</html>Значок меняется в зависимости от того, открыл пользователь страницу или нет
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/onpage.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my stite </title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script >
var linkElement = document.querySelector("link[rel='icon']");
window.addEventListener('visibilitychange', () => {
linkElement.href = document.hidden ? "start.png":"onpage.svg";
});
</script>
</body>
</html>Приостановка музыки при переходе в скрытый режим
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
backgroundMusic.play();
} else {
backgroundMusic.pause();
}
});Для иконок https://icons8.com/icons
Улучшите пользовательский интерфейс вашего веб-сайта, реализовав этот простой прием JavaScript. Изучите пошаговый процесс и сделайте свой сайт более профессиональным и визуально привлекательным. Не упустите возможность выделиться в конкурентном мире веб-разработки!
