Да, с небольшой помощью Яваскрипта.
Восстановим статический пример из предыдущего совета:
/* 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.