x
 
Андрей Пулин
20 декабря 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


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

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

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

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как отслеживать и обрабатывать чит-коды 2 Существует ли способ проверить компетентность веб-разработчика, если сам ничего не понимаешь в этом? ЦСС-переменные: как использовать и для чего могут пригодиться 2 Принцип «не протыкал — не сделал» 4




Недавно всплыло

Хочу научиться сторителлингу 2 Хочу научиться сторителлингу 11 2 2