<header>
<h2 class="title">Використання події Wheel</h2>
<p class="description">Цей приклад демонструє зміну кольору фону елемента за допомогою прокручування миші.</p>
</header>
<main>
<div class="result">
<div id="colorBox" class="color-box">
Прокручуйте мишу, щоб змінити колір!
</div>
<div id="coords" class="coordinates">
Прокрутили на осі X: 0, Y: 0
</div>
</div>
</main>
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.color-box {
width: 300px;
height: 300px;
margin: 0 auto;
text-align: center;
line-height: 120px;
font-size: 20px;
border-radius: 8px;
background-color: lightgray;
transition: background-color 0.3s ease;
}
.coordinates {
margin-top: 15px;
font-size: 14px;
color: #333;
}
// Отримуємо елементи
const colorBox = document.getElementById('colorBox');
const coordsDisplay = document.getElementById('coords');
// Функція для зміни кольору фону на основі прокручування
function changeColor(event) {
// Визначаємо напрямок прокручування
const direction = event.deltaY > 0 ? 'down' : 'up';
// Встановлюємо новий колір в залежності від напрямку прокручування
if (direction === 'down') {
colorBox.style.backgroundColor = getRandomColor();
} else {
colorBox.style.backgroundColor = getRandomColor();
}
// Оновлюємо координати прокручування на екрані
coordsDisplay.textContent = `Прокрутили на осі X: ${event.deltaX}, Y: ${event.deltaY}`;
}
// Функція для генерації випадкового кольору
function getRandomColor() {
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
return randomColor;
}
// Додаємо обробник події прокручування
document.addEventListener('wheel', changeColor);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.