1 ноября 2017

Анимация мышки на CSS 3

CSS

Всем привет и добрый вечер! Вот уже наступил первый день ноября и сегодня хочу поделиться простым, но в то же время полезным скриптом, который, наверняка, Вы видели на многих сайтах, особенно на Landing Page. И так, речь пойдет об анимации мышки на CSS 3. Цель скрипта визуальное оформление и смысловая нагрузка заключается в интуитивном понятии прокрутки веб страницы.

То есть, человек смотрит на данную иконку мышки, видит анимацию колесика, что оно прокручивается вниз и мышлительно, должен догадываться и понимать, что страницу можно скроллить. Если честно, не так часто пишу уроки по CSS 3, вот пожалуй редкий случай, когда решил написать про анимацию)

Первый шаг. HTML.

Подключаем файл css, в нашем случае, это, как обычно для демо версий demo.css

Теперь давайте, создадим два div блока, первому из которых пропишем класс mouse, а второму внутреннему блоку пропишем класс wheel.

Соответственно, для простоты понимания, названия классов были подобраны правильными словами.

Второй шаг. CSS 3.

Переходим к самому интересному, а именно к стилям CSS 3, где будем рассматривать анимацию и ее поведение. Сначала пропишем стили для нашей иконки мышки. Думаю тут комментарии излишни, ведь мы просто создаем каркас овала.

.mouse {
  border: 2px solid #fff;
  border-radius: 17px;
  height: 50px;
  width: 30px;
  display: block;
  z-index: 10;
}

Теперь создадим внутри нашего овала, колесико с помощью позиционирования, цвета, высоты и ширины.

.mouse .wheel {
  position: relative;
  border-radius: 4px;
  background:#fff;
  width: 2px;
  height: 7px;
  margin: auto;
}

После этого переходим к анимации и тут важно понимать принцип действия, каждого из свойств анимации.

Название анимации	Свойство анимации
animation-name	Имя. К примеру, wheel.
animation-duration	Продолжительность. Задается в s - секундах и ms - миллисекундах.
animation-timing-function	Временная функция. Задается для ключевых моментов, к примеру для увеличения скорости.
animation-delay	Задержка. Позволяет задавать параметры, к примеру с отрицательным промежутком времени.
animation-iteration-count	Направление. Можно так сказать, цикл самой анимации. Много раз или один раз проигрывания.
animation-play-state	Проигрывание. Допустим, можно задать проигрывание в обратном порядке.

.mouse .wheel {
  -webkit-animation-name: wheel;
          animation-name: wheel;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

Теперь нам остался последний момент, а именно разобраться с ключевыми кадрами @keyframes. Простыми словами, мы делим нашу анимацию на кадры, разбивая ее посредством движения. Разбивать можно, к примеру на проценты от 0 значения до 100.

@-webkit-keyframes wheel {
  0% {
    top: 3px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 18px;
    opacity: 0;
  }
}

@keyframes wheel {
  0% {
    top: 3px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 18px;
    opacity: 0;
  }
}

А на этом все, благодарю за внимание, не забывайте подписываться на нас, чтобы не пропустить новый материал и быть в курсе всех событий! Всем удачи!)

Источник материала »

vk.com
Комментарии