<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Анимация на CSS3.

Анимация на CSS3.

Чтобы сделать анимацию какого-нибудь элемента на странице, раньше мы должны были использовать JQuery. Но CSS3 и тут нам облегчил задачу, т.к. теперь мы можем обойтись без скриптов. Вот в этой статье давайте и поговорим о том, как анимировать элемент на странице с помощью CSS3.

Анимации задаются по ключевым кадрам. Давайте их и создадим.

@keyframes spin {
  0% {
   здесь код
  }
  100% {
   здесь код
  }
}

Мы можем написать так:

@keyframes spin {
  from {
   здесь код
  }
  to {
   здесь код
  }
}

Это абсолютно тоже самое.

Чтобы создать ключевые кадры, мы должны написать @keyframes, а затем указать какое-нибудь имя. В фигурных скобках мы указываем свойства, которые хотим анимировать на определённой стадии анимации. Конечно, значения могут быть не обязательно 0% или 100%. Мы также можем задать и промежуточные значения.

@keyframes spin {
  0% {
   здесь код
  }
  25% {
   здесь код
  }
  100% {
   здесь код
  }
}

Если в разный промежуток времени у нас должно происходить одно и то же, мы можем написать эти промежутки через запятую:

@keyframes spin {
  0% {
   здесь код
  }
  25%, 50% {
   здесь код, который будет выполняться в промежутках 25% и 50%
  }
  100% {
   здесь код
  }
}

Давайте дальше смотреть уже на примере.

Создадим HTML разметку

<html>
<head>
  <title>Animation</title>
  <meta charset="utf-8">
</head>
<body>
  <div class="block"></div>
</body>
</html>

Теперь напишем стили

@keyframes spin {
  0% {
   transform: rotate(0deg);
  }
  100% {
   transform: rotate(360deg);
  }
}

.block {
  animation-name: spin;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 1s;
}

Если вы запустите этот пример, то увидите блок, который сделает полный оборот по часовой стрелке и остановится. Теперь поговорим о том, что каждое свойство значит.

В animation-name мы указываем имя нашей анимации, то самое, что мы указали после ключевого слова @keyframes.

В animation-duration мы указываем продолжительность нашей анимации. В нашем случае 2 секунды.

О свойствах animation-timing-function и animation-delay мы говорили в статье про плавные переходы, поэтому повторяться не будем.

Чтобы наш блок повернулся 2 раза, нужно указать свойство animation-iteration-count

animation-iteration-count: 2;

Если вам нужно, чтобы анимация работала вечно, укажите значение infinite

animation-iteration-count: infinite;

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

animation-direction: reversed;

А если мы хотим, чтобы наша анимация первую итерацию делала нормально, а вторую в обратном направлении, нужно указать:

animation-direction: alternate;

Сделаем, чтобы при наведении на наш блок, анимация останавливалась. За это отвечает свойство animation-play-state со значением paused.

.block:hover {
  animation-play-state: paused;
}

В конце приведу короткую запись

.block {
  animation: spin 2s linear 1s infinite alternate;
}

На этом всё! Как видите, анимация - вещь классная, а используя её со всем тем, что мы изучили в прошлых статьях, можно добиться потрясающих результатов! Так что, удачи в эксперементах ;)

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

gordon gordon 23.05.2014 15:37:53

Как и предыдущий урок (transform), в гуглохроме не работает

Ответить

php_programmer php_programmer 14.05.2015 17:25:29

Добавьте префиксы(-webkit- для браузеров, основанных на этом движке)

Ответить

benom benom 26.07.2015 20:23:58

<html> <head> <meta Charset="UTF-8"> <title>СПАСИБО</title> </head> <body> <h1>Благодарю</h1> </body> </html>

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.