/ Новости и уроки / Анимация панелей личных умений

Анимация панелей личных умений

62
Анимация панелей личных умений

Эту технику дизайна обычно можно найти в личных портфолио или на сайтах дизайн-студии. Панели навыков представляют уровень знаний, связанных с определенными задачами - веб-дизайн, иллюстрация, брендинг, дизайн персонажей, вы называете это! Добавление некоторых причудливых анимаций к этим панелям умений обеспечит более быструю связь со зрителем.

В этом уроке я хочу продемонстрировать, как вы можете создавать панели умений при помощи css, используя анимацию ключевых кадров. Это также вполне возможно для запуска с использованием JavaScript, который был бы сильнее в старых устаревших веб-браузерах. Однако ключевые кадры CSS3 становятся все более популярными с гораздо более широкой поддержкой в эти дни. Взгляните на мою живую демонстрацию, чтобы увидеть конечный продукт.

Разметка HTML

Давайте начнем с обычной разметки html. Id skillset будет служить для обертке, поэтому мы можем центрировать все, увеличивать или уменьшать ширину или настраивать другие параметры в CSS. Внутренний div с классом skill охватывает каждый измеряемый навык.

Класс skillbar будет у нас отвечать за анимацию.


  <div id="w">
    <div id="content">
      <h1>Анимация панелей личных умений</h1>
      
      <div id="skillset">
        <h2>Анимированные панели</h2>
        <div class="skill">
          <h3>HTML5/CSS3 <sup>(100%)</sup></h3>
          <span class="bar"><span class="skillbar htmlcss">8 лет</span></span>
        </div>

Расположение элементов

Теперь начнем со стилизации элементов.

Контейнер с классом bar использует фиксированное значение ширины и высоты, чтобы гарантировать, что все выглядит одинаково во всех браузерах. Класс skillbar сохраняет значение высоты вместе с текстом, но во втором примере эти элементы span просто не будут отображаться, потому что они пусты. Нам нужно использовать 100% высоты на всех внутренних панелях умений, чтобы они появлялись даже без какого-либо контента.


/** skills bar ui **/
#skillset {
  display: block;
  margin-bottom: 8px;
}
 
#skillset .skill { 
  display: block;
  margin-bottom: 20px;
}
 
#skillset .skill h3 {
  display: block;
  font-size: 1.55em;
  line-height: 1.4em;
  margin-bottom: 2px;
}
 
#skillset .skill .bar {
  display: block;
  height: 25px;
  line-height: 25px;
  width: 500px;
  padding: 3px 4px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 2px #969492; 
  -moz-box-shadow: 1px 1px 2px #969492;
  box-shadow: 1px 1px 2px #969492;
  background-color: #dadada;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#efeaea), to(#dadada));
  background-image: -webkit-linear-gradient(top, #efeaea, #dadada);
  background-image: -moz-linear-gradient(top, #efeaea, #dadada);
  background-image: -ms-linear-gradient(top, #efeaea, #dadada);
  background-image: -o-linear-gradient(top, #efeaea, #dadada);
  background-image: linear-gradient(top, #efeaea, #dadada);
}
 
#skillset .skill .bar .skillbar {
  display: block;
  height: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  color: #414141;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.55);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: #4cc958;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#68e574), to(#4cc958));
  background-image: -webkit-linear-gradient(top, #68e574, #4cc958);
  background-image: -moz-linear-gradient(top, #68e574, #4cc958);
  background-image: -ms-linear-gradient(top, #68e574, #4cc958);
  background-image: -o-linear-gradient(top, #68e574, #4cc958);
  background-image: linear-gradient(top, #68e574, #4cc958);
}
#skillset .skill .bar .skillbar small { font-size: 0.85em; padding-left: 3px; vertical-align: top; }

Анимация

Использование ключевого слова forwards заставит каждый элемент сохранять стили CSS, найденные в последнем ключевом кадре. Так что в этом случае мы запускаем разные анимации для каждого класса, и каждая анимация имеет начальную позицию 0%, за которой следует позиция, завершенная на 100%.


#skillset .skill .bar .htmlcss {
  -moz-animation: htmlcss 1.5s ease-in-out forwards;
  -webkit-animation: htmlcss 1.5s ease-in-out forwards;
  animation: htmlcss 1.5s ease-in-out forwards;
}
 
#skillset .skill .bar .jquery {
  -moz-animation: jquery 1.5s ease-in-out forwards;
  -webkit-animation: jquery 1.5s ease-in-out forwards;
  animation: jquery 1.5s ease-in-out forwards;
}
 
#skillset .skill .bar .phpmysql {
  -moz-animation: phpmysql 1.5s ease-in-out forwards;
  -webkit-animation: phpmysql 1.5s ease-in-out forwards;
  animation: phpmysql 1.5s ease-in-out forwards;
}
 
#skillset .skill .bar .wordpress {
  -moz-animation: wordpress 1.5s ease-in-out forwards;
  -webkit-animation: wordpress 1.5s ease-in-out forwards;
  animation: wordpress 1.5s ease-in-out forwards;
}
 
#skillset .skill .bar .woocommerce {
  -moz-animation: woocommerce 1.5s ease-in-out forwards;
  -webkit-animation: woocommerce 1.5s ease-in-out forwards;
  animation: woocommerce 1.5s ease-in-out forwards;
}

Завершение ключевых кадров

Последний блок кода - это ключевые кадры. Мы даем каждой настройке ключевого кадра уникальное имя, которое представлено более ранними свойствами анимации. Я использую префиксы CSS3 для -moz и -webkit для обеспечения соответствия как можно большему числу версий браузера. Каждая анимация разбиты на блоки, сгруппированные по имени анимации.


/** CSS3 keyframes **/
@-moz-keyframes htmlcss {
  0%   { width: 35px; }
  100% { width: 100%; }
}
@-webkit-keyframes htmlcss {
  0%   { width: 35px; }
  100% { width: 100%; }
}
@keyframes htmlcss {
  0%   { width: 35px; }
  100% { width: 100%; }
}
 
 
@-moz-keyframes phpmysql {
  0%   { width: 45px; }
  100% { width: 70%; }
}
@-webkit-keyframes phpmysql {
  0%   { width: 45px; }
  100% { width: 70%; }
}
@keyframes phpmysql {
  0%   { width: 45px; }
  100% { width: 70%; }
}
 
 
@-moz-keyframes jquery {
  0%   { width: 45px; } 
  100% { width: 55%; }
}
@-webkit-keyframes jquery {
  0%   { width: 45px; } 
  100% { width: 55%; }
}
@keyframes jquery {
  0%   { width: 45px; } 
  100% { width: 55%; }
}
 
 
@-moz-keyframes wordpress {
  0%   { width: 35px; } 
  100% { width: 65%; }
}
@-webkit-keyframes wordpress {
  0%   { width: 35px; } 
  100% { width: 65%; }
}
@keyframes wordpress {
  0%   { width: 35px; } 
  100% { width: 65%; }
}
 
 
@-moz-keyframes woocommerce {
  0%   { width: 35px; } 
  100% { width: 35%; }
}
@-webkit-keyframes woocommerce {
  0%   { width: 35px; } 
  100% { width: 35%; }
}
@keyframes woocommerce {
  0%   { width: 35px; } 
  100% { width: 35%; }
}

На этом урок заканчивается. У нас получилась красивая и анимированная панель личных умений.