HTML урок 8. Анимация

Автор: | 15.09.2015
Нет комментариев 
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Блочная верстка</title>
  </head>
  <body>
  <div class="wrapper">
    <div id="header">
      <div class="logo"><a href="index.html">Ikurs</a></div>
    </div>
    <div id="nav">
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="#">Услуги</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>
      </nav>
    </div>
    <div id="content">
      <div class="col-4"><img class="blur" src="images/webmaster.jpg"></div>	
      <div class="col-4"><img class="op" src="images/webmaster.jpg"></div>	
      <div class="col-4"><img src="images/webmaster.jpg"></div>	
      <div class="col-4"><img src="images/webmaster.jpg"></div>

      <div class="col-3"><img src="images/webmaster.jpg"></div>
      <div class="col-3"><img src="images/webmaster.jpg"></div>
      <div class="col-3"><img src="images/webmaster.jpg"></div>			
    </div>
    <div id="sidebar">sidebar</div>
    <div id="footer">footer</div>
    <div class="sqr"><a href="#">up</a></div>
  </div>	
  </body>
</html>

 

/*Универсальный селектор 0 б*/
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family:Calibri,sans-serif;
  background:pink url(images/symphony.png) repeat;
  background-position:100% 50%;
}
img{
  max-width:100%;
  width:auto;
}
/*Селекторы тегов (элементов) 2 б*/

.wrapper{
  max-width:960px;
  margin:0 auto;
}
#header,#footer,#nav{
  width:100%;
  float:left;
  background: rgba(0, 0, 0, 0.70);
  padding:10px 20px;
  border-bottom:#fff solid 2px;
}
#header{
  position:fixed;
  max-width:960px;
  width:100%;
  z-index:1;
}
#nav{
  position:fixed;
  max-width:960px;
  width:100%;
  top:60px;
  z-index:1;
}
#content{
  margin-top:120px;
  width:calc(100% - 300px);
  float:left;
  background:#eee url(images/webmaster.jpg) no-repeat;
  background-size:cover;
  background-position: 50% 50%;
  background-attachment:fixed;
  padding:10px 20px;
  height:700px;
  
}
#sidebar{
  margin-top:120px;
  width:300px;
  float:left;
  background:#ddd;
  padding:10px 20px;
}
/*Селекторы классов 10 б*/
.logo{
  text-align:center;
}
.logo a{
  color:#fff;
  font-size:30px;	
  text-decoration:none;
}
#nav li{
  float:left;
  margin: 10px 0;
}
#nav a{
  color:#000;
  padding:10px;
  text-decoration:none;
  background:#fff;
  border:2px transparent solid;
  
}
#nav a:hover{
  /*background:#fff;*/
  border:2px #333 solid;
}
#content{
  position:relative;
}
.sqr{
  width:50px;
  height:50px;
  background:red;
  position:fixed;
  right:0%;
  bottom:0;
  z-index:999;
}
.col-4{
  width:25%;
  float:left;
  padding:10px;
}
.col-3{
  width:33.3%;
  float:left;
  padding:10px;
}
.blur{
  filter: blur(5px);
   -webkit-filter: blur(5px);
  -o-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
}
.blur:hover{
  -webkit-filter: blur(0px);
}
.op{
  opacity:0.5;
}
.op:hover{
  opacity:1;
}



/*Селекторы идентификаторов 100 б*/

 

Содержание:

  • @keyframesanimation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-delay
  • animation-fill-mode

Свойство animation позволяет анимировать элементы страницы.

Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.

Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.

@keyframes

Сама анимация задается внутри блока @keyframes. После @keyframes задается имя анимации, а потом внутри фигурных скобок — её шаги.

Шаги можно задавать через проценты или с помощью ключевых слов from и to. При этом в шагах можно менять тип анимации (animation-timing-function):

/* Современные браузеры, кроме Chrome, Opera, Safari */
@keyframes go-left-right {   /* назовём анимацию: "go-left-right" */
  from {
    left: 0px;               /* от: left: 0px */
  }
  to {
    left: calc(100% - 50px); /* до: left: 100%-50px */
  }
}

/* Префикс для Chrome, Opera, Safari */
@-webkit-keyframes go-left-right {
  from {
    left: 0px;
  }
  to {
    left: calc(100% - 50px);
  }
}

.progress {
  /* применить анимацию go-left-right */
  /* продолжительность 3s */
  /* количество раз: бесконечное (infinite) */
  /* менять направление анимации каждый раз (alternate) */
  animation: go-left-right 3s infinite alternate;
  -webkit-animation: go-left-right 3s infinite alternate;

Animation-name

Используется для задания имени анимации.

Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.

animation-name: move; — одна анимация. animation-name: move, sun-color; — две анимации, имена задаются через запятую.

Animation-duration

Длительностью анимации управляет свойство animation-duration.

Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-timing-function

Свойство определяет тип анимации.

Возможные значения:

Плавная анимация

  • ease — скольжение (значение по умолчанию)
  • linear — ровное движение
  • ease-in — ускорение к концу
  • ease-out — ускорение в начале
  • ease-in-out — более плавное скольжение, чем ease
  • cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации.

Animation-iteration-count

Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).

Возможные значения:

число — сколько раз проиграть анимацию. infinite — бесконечное повторение.

Animation-direction

Отвечает за направление анимации.

Возможные значения:

  • normal — анимация проигрывается в обычном направлении, с начала и до конца.
  • reverse — анимация проигрывается в обратном направлении, то есть с конца.
  • alternate — анимация проигрывается с начала и до конца, а затем в обратном направлении.
  • alternate-reverse — анимация проигрывается с конца до начала, а затем в обратном направлении.

Animation-play-state

Управляет остановкой и проигрыванием анимации.

Возможные значения:

  • running — анимация проигрывается (значение по умолчанию).
  • paused — анимация застывает на первом шаге.

Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :hover

Animation-delay

С помощью animation-delay можно задавать задержку анимации перед началом воспроизведения.

Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Все эти свойства можно записать с помощью короткой записи, например:

animation: timing 5s infinite alternate;

Обязательные значения — имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе — задержкой.

 

Готовые ключевые кадры на сайте http://daneden.github.io/animate.css/, обязательно скачайте файл animate.css и подключите его к вашей странице.

Для того чтобы получить анимацию при прокрутке используйте нижеописанный скрипт и разместите его перед закрывающимся тего </body>

<script>$(window).scroll(function() {
    $('.mov').each(function(){
      var imagePos = $(this).offset().top;
      var topOfWindow = $(window).scrollTop();
      if (imagePos < topOfWindow+200) {
        $(this).addClass('wobble');
      }
    });
  });
</script>

Скрипт работает с библиотекой jquery, чтобы его подключить в контейнер </head> вставьте:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>