Школа
Веб-разработка

Скажите, Руст, есть способ заставить такую анимацию работать в зависимости от скролла?
Я имею в виду скорость анимации, ну и чтоб останавливалась, когда не скроллишь, и крутилась назад, когда скроллишь обратно.

Андрей Пулин
20 дек 2018
👁 4307  
Веб-разработка

Скажите, Руст, есть способ заставить такую анимацию работать в зависимости от скролла?
Я имею в виду скорость анимации, ну и чтоб останавливалась, когда не скроллишь, и крутилась назад, когда скроллишь обратно.

Андрей Пулин
20 дек 2018
👁 4307  
Руст Кулматов
Фронтенд‑разработчик, преподаватель, соавтор движка электронных книг бюро
Полезно
 19
19
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

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

/* 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 19
19
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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