Да, с небольшой помощью Яваскрипта.

Восстановим статический пример из предыдущего совета:

/* html */

<div class="clock">
  <div class="hand"></div>
</div>
/* css */

/* Рамка часов */
.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid black;
  border-radius: 50%;
}
        
/* "Крепление" для стрелок в центре */
.clock::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: black;
  content: '';
  transform: translate(-50%, -50%);
}

/* "Секундная стрелка */
.hand {
  position: absolute;
  top: 5%;
  left: 49%;
  width: 2%;
  height: 50%;
  border-radius: 2px;
  background: #000;
  transform-origin: 50% 90%;
}

А теперь оживим:

/* JS */

// Найдём cтрелку
const $hand = $document.querySelector('.hand')

document.addEventListener('scroll', () => {
  // Каждый пиксель прокрутки будем считать за один градус
  const angle = window.pageYOffset

  // Применим получившийся угол
  $hand.style.transform = `rotateZ(${angle}deg)`
})

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы