<header>
  <h2 class="title">wheel</h2>
  <p class="description">Відстежує прокручування миші для зміни масштабу зображення</p>
</header>
<main>
  <div class="result">
    <!-- Елемент для масштабування -->
    <img id="zoomImage" src="https://via.placeholder.com/300" alt="Zoomable Image" />
    
    <!-- Відображення поточного масштабу -->
    <p>Поточний масштаб: <span id="scaleValue">1</span>x</p>

    <!-- Кнопка для скидання масштабу -->
    <button id="resetButton">Скинути масштаб</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  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;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  text-align: center;
}

img {
  display: block;
  margin: 20px auto;
  transition: transform 0.3s ease;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#scaleValue {
  font-weight: bold;
}

const image = document.getElementById('zoomImage');
const scaleValueDisplay = document.getElementById('scaleValue');
const resetButton = document.getElementById('resetButton');

let scale = 1;  // Початковий масштаб

// Обробник прокручування миші для зміни масштабу зображення
image.addEventListener('wheel', (event) => {
  event.preventDefault();
  
  // Змінюємо масштаб залежно від напрямку прокрутки
  if (event.deltaY < 0) {
    scale += 0.1;  // Збільшуємо масштаб
  } else {
    scale -= 0.1;  // Зменшуємо масштаб
  }

  // Обмежуємо масштаб, щоб він не виходив за межі (0.5x до 3x)
  scale = Math.min(Math.max(0.5, scale), 3);

  // Застосовуємо масштаб до зображення
  image.style.transform = `scale(${scale})`;
  scaleValueDisplay.textContent = scale.toFixed(1);
});

// Скидання масштабу до 1x при натисканні кнопки
resetButton.addEventListener('click', () => {
  scale = 1;
  image.style.transform = `scale(1)`;
  scaleValueDisplay.textContent = '1';
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.