Показать сообщение отдельно
Непрочитано 01.08.2016, 03:40   #1
Аватар для L2Banners
Пользователь

Автор темы (Топик Стартер) Анимация статуса сервера и не только

Сейчас стали популярны различные анимации на сайте и особенным спросом пользуются анимации статуса серверов.

В этой теме я буду писать инструкции о том, как сделать различные анимации на примере статуса серверов движка Stress Web 13, но применить их можно практически к любому элементу сайта.
Я постараюсь описывать самые простые способы и варианты анимаций специально для тех, кто ничего не понимает в этом. Для тех кто разбирается достаточно просто скопировать стиль и присвоить класс нужному блоку.



Я напишу 1 пример, а любую другу анимацию вы будете делать аналогично:

============================ Начало примера==============================

Анимация #1 (Увеличение <=> уменьшение):



В engine.css в самом низу добавляем:

Код HTML:
.l2banners_serv_animation_1 {
animation: l2banners_scale  2s infinite;
}

@keyframes l2banners_scale {
from {
  transform: scale(1);
  }
30% {
  transform: scale(1.1);
  }
to {
  transform: scale(1);
  }
}
В файле server.tpl находим тег [item] и после него в первом же теге прописываем класс:

Код HTML:
class="l2banners_serv_animation_1"

Например в дефолтном шаблоне написано вот так:

Код HTML:
[item]
<tr>
значит у вас должно получиться вот так:

Код HTML:
[item]
<tr class="l2banners_serv_animation_1">

вместо <tr> там могут быть другие теги: <div> <li> <span> и т.д.. значит вставляете в тот который будет первым, если это <div> то получится вот так:

Код HTML:
[item]
<div class="l2banners_serv_animation_1">
Если там уже написано class= значит надо просто добавить через пробел l2banners_serv_animation_1

Например было написано: <div class="status">
вам надо просто добавить <div class="status l2banners_serv_animation_1">

Вот этот класс class="l2banners_serv_animation_1" вы можете добавить к любому элементу на сайте, например к логотипу.

============================ Конец примера==============================

Итак, если вы поняли принцип в дальнейшем я буду публиковать стиль анимации и название класса
Если что-то не получается пишите код вашего server.tpl в коменты и адрес вашего сайта мне в личку.
Так же пишите в коменты, какие анимации вы хотели бы увидеть.

Добавлено через 2 минуты
Анимация №2 (Прыжки с тенью)





В engine.css в самом низу добавляем:

Код HTML:
.l2banners_animation_2 {
  animation: l2banners_bouncing 0.5s cubic-bezier(.1,.25,.1,1) 0s infinite alternate both;
  position: relative; /* Если вдруг что-то не работает попробуйте удалить всю эту строку */
}

@keyframes l2banners_bouncing{
  0%  { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5);}
  100%{ bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1);}
}
В файле server.tpl добавляем класс:

Код HTML:
class="l2banners_animation_2"
Добавлено через 8 минут
Анимация №3 (Движение влево<=>вправо)



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

В engine.css в самом низу добавляем:

Код HTML:
.l2banners_animation_3 {
  animation: l2banners_swing 2.5s ease infinite;
}
@keyframes l2banners_swing
        {
            45%
            {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            46%
            {
                -webkit-transform: translateX(5px);
                transform: translateX(5px);
            }
            
            48%
            {
                -webkit-transform: translateX(-5px);
                transform: translateX(-5px);
            }
            
            50%
            {
                -webkit-transform: translateX(3px);
                transform: translateX(3px);
            }
            
            52%
            {
                -webkit-transform: translateX(-3px);
                transform: translateX(-3px);
            }
            
            54%
            {
                -webkit-transform: translateX(2px);
                transform: translateX(2px);
            }
            55%
            {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            
            100%
            {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
        }
В файле server.tpl добавляем класс:

Код HTML:
class="l2banners_animation_3"



Анимация №4 (l2banners_tada)







Как и в предыдущей анимации её обычно используют со скриптом, но мы будем делать максимально простым способом через ксс



В engine.css в самом низу добавляем:

Код HTML:
.l2banners_animation_4 {
  animation: l2banners_tada 3s infinite;
}

@keyframes l2banners_tada {
    0% {
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
  25% {
    -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
  }
    38%, 41% {
        -webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
        transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
    }
    44%,50%,56%,62% {
        -webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
        transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }
    47%,53%,59% {
        -webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
        transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }
    70% {
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
}
В файле server.tpl добавляем класс:

Код HTML:
class="l2banners_animation_4"

Последний раз редактировалось L2Banners; 01.08.2016 в 03:49. Причина: Добавлено сообщение
L2Banners вне форума Отправить сообщение для L2Banners с помощью Skype™ Ответить с цитированием
Сказали спасибо: