анимация на сайте

Анимация с помощью CSS

MnogoBlog > WordPress > Дизайн > CSS и теги > Анимация с помощью CSS
2 комментария

Здравствуйте, сегодня хотелось бы показать примеры создания анимации с помощью CSS3 – будем вращать картинку по часовой стрелки, научимся вращать ее с замедлением и ускорением, а также двигать катринку по клику, наведению и другие примеры анимации.

Скачать исходники для статьи можно ниже

Пример анимации 1: Непрерывно вращающаяся картинка:

Вот что у нас получиться:

 
1.1. Создаем блок с картинкой (крутящаяся мельница): 

<img class="loader" src="/wp-content/uploads/2013/08/windmill-blades.png">

, где “src=” – указывает путь до картинки:
windmill-blades

Вставляем вышеуказанный код в любое место на вашем сайте, например, давайте вставим его в виджет – для этого на wordpress заходим в панель управления, в левом меню выбираем пункт “Внешний вид” и его подпункт “Виджеты”, ищем виджет с названием “Текст” и переносим его в сайдбар, далее вставляем вышеуказанный код блока с картинкой.

анимация на сайте с помощью CSS

 
1.2. Прописываем к нашему рисунку стили оформления (CSS), которые заставят его двигаться: 


.loader{
 -webkit-animation: preloader 3s infinite linear;
 -moz-animation: preloader 3s infinite linear;
 -ms-animation: preloader 3s infinite linear;
 -o-animation: preloader 3s infinite linear;
 animation: preloader 3s infinite linear;
}

@-webkit-keyframes preloader {
 to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes preloader {
 to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes preloader {
 to { -ms-transform: rotate(360deg); }
}

@-o-keyframes preloader {
 to { -o-transform: rotate(360deg); }
}

@keyframes preloader {
 to { transform: rotate(360deg); }
}

Здесь скорость вращения можно поменять изменив параметр “3s”.

В wordpress стили оформления прописываются в файле – style.css. Для того, чтобы его открыть – заходим в панель управления wordpress, слева выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл – style.css, открываем его и в самый конец вставляем вышеуказанный код.

Все готово! – картинка должна крутиться.

Давайте рассмотрим еще один пример анимации – но в нем картинка будет вращаться с замедлением, а потом опять разгоняться.

 

Пример анимации 2: Картинка с меняющейся скоростью вращения.

Вот, что должно получиться во втором примере:

 
2.1 Создаем блок с картинкой (крутящаяся мельница): 

<img class="loader" src="/wp-content/uploads/2013/08/windmill-blades.png">

 
2.2 Прописываем к нашему рисунку стили оформления (CSS), которые заставят его двигаться: 

.loader{
-o-transform: rotate(-40deg);
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-mz-transform: rotate(-40deg);
transform: rotate(-40deg);
    -webkit-animation: preloader 40s 4s ease-in-out infinite;
    -moz-animation: preloader 40s 4s ease-in-out infinite;
    -ms-animation: preloader 40s 4s ease-in-out infinite;
    -o-animation: preloader 40s 4s ease-in-out infinite;
    animation: preloader 40s 4s ease-in-out infinite;
}

@-webkit-keyframes preloader {
   
from	{ -webkit-transform:rotate(3200deg); }
to		{ -webkit-transform:rotate(-40deg); }
}

@-moz-keyframes preloader {
  from	{ -webkit-transform:rotate(3200deg); }
to		{ -webkit-transform:rotate(-40deg); }
}

@-ms-keyframes preloader {
   from	{ -webkit-transform:rotate(3200deg); }
to		{ -webkit-transform:rotate(-40deg); }
}

@-o-keyframes preloader {
    from	{ -webkit-transform:rotate(3200deg); }
to		{ -webkit-transform:rotate(-40deg); }
}

@keyframes preloader {
    from	{ -webkit-transform:rotate(3200deg); }
to		{ -webkit-transform:rotate(-40deg); }
}

Все готово! Теперь наша анимация будет с меняющейся скоростью кручения.

 

Пример анимации 3: Интересный эффект перемещения картинки/текста при клике на объект.

При клике на текст или картинку – она будет сдвигаться, вот пример кода: 

<div class="" onclick="this.style.left=parseInt(this.style.left)+50+'px'" style="left: 10px; position: relative;"><img src="/wp-content/uploads/2013/07/stroka.png" alt="" /></div>

, где:
50+px – означает смещение изображения/текста при клике на 50 px.
left: 10px – отступ слева на 10 px – изначальная позиция изображение.
position – устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице, в частности relative – относительное позиционирование. Если поставить position: absolute – то отступ будет считаться относительно окна браузера.

Демонстрация примера:

 

Пример анимации 4: Еще один эффект перемещения картинки/текста при клике на объект.

Но здесь, в отличие от предыдущего примера объект перемещается плавно, а не моментально.

Вот например для разных видов браузеров, но в данном примере у вас появятся 3 объекта: 

<div style="-webkit-transition: -webkit-transform 3s ease-in; width: 50px"
  onclick="this.style.webkitTransform='translate(40em,0)'">
Привет посетитель2!
</div>/* Для Chrome, iOS */
<div style="-moz-transition: -moz-transform 3s ease-in; width: 50px"
  onclick="this.style.MozTransform='translate(40em,0)'">
Привет посетитель2!
</div>/* Для Firefox */
<div style="-o-transition: -o-transform 3s ease-in; width: 50px"
  onclick="this.style.OTransform='translate(40em,0)'">
Привет посетитель2!
</div>/* Для Opera */

 
Чтобы объединить данные стили для одного объекта можно воспользоваться следующей конструкцией: 

<?php
    // Информация о браузере пользователя
    $browser = $_SERVER["HTTP_USER_AGENT"];
    
    // Смотрим, есть ли в этой строке упоминание соответствующего браузера
if ( stristr($_SERVER['HTTP_USER_AGENT'], 'Firefox') ) echo 'firefox';
elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Chrome') ) echo 'chrome';
elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Safari') ) echo 'safari';
elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Opera') ) echo 'opera';
elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.0') ) echo 'ie6';
elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE 7.0') ) echo 'ie7';
elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE 8.0') ) echo 'ie8';
?>

Незабываем экранировать одинарные кавычки (‘) с помощью обратного слеша (\) и в итоге получаем следующий код: 

<?php

  // Информация о браузере пользователя
    $browser = $_SERVER["HTTP_USER_AGENT"];

if ( stristr($_SERVER['HTTP_USER_AGENT'], 'Firefox') ) echo '
<div style="-moz-transition: -moz-transform 3s ease-in; width: 50px"
  onclick="this.style.MozTransform=\'translate(40em,0)\'">
<img  src="/wp-content/uploads/2013/07/stroka.png"  />
</div>';
elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Chrome') ) echo '
<div style="-webkit-transition: -webkit-transform 3s ease-in; width: 50px"
  onclick="this.style.webkitTransform=\'translate(40em,0)\'">
<img  src="/wp-content/uploads/2013/07/stroka.png"  />
</div>';
elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Safari') ) echo 'safari';
elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Opera') ) echo '
<div style="-o-transition: -o-transform 3s ease-in; width: 50px"
  onclick="this.style.OTransform=\'translate(40em,0)\'">
<img  src="/wp-content/uploads/2013/07/stroka.png"  />
</div>';
?>

То есть будет отображаться только один объект – и в зависимости от браузера – к нему будут применяться соответствующие стили оформления.

 

Пример анимации 5: Движение объекта при наведении на него мышкой.

<img class="turn"  src="/wp-content/uploads/2013/07/stroka.png"  />

Здесь придется прописать стили оформления для картинки: 

.turn:hover {
    -moz-transform: translate(40em,0); /* Для Firefox */
    -ms-transform: translate(40em,0); /* Для IE */
    -webkit-transform: translate(40em,0); /* Для Chrome, iOS */
    -o-transform: translate(40em,0); /* Для Opera */
    transform: translate(40em,0);
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
-ms-transition: all 4s ease-in-out;
   }

Похожие записи:

Анимация с помощью CSS: 2 комментария

Добавить комментарий