Анимация статуса сервера и не только

[L2Banners 664]

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

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

Я напишу 1 пример, а любую другу анимацию вы будете делать аналогично:
 
============================ Начало примера==============================
 
Анимация #1 (Увеличение <=> уменьшение):
 


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

.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] и после него в первом же теге прописываем класс:

class="l2banners_serv_animation_1"

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

[item]
<tr>

 
значит у вас должно получиться вот так:

[item]
<tr class="l2banners_serv_animation_1">

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

[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 в коменты и адрес вашего сайта мне в личку.
Так же пишите в коменты, какие анимации вы хотели бы увидеть.

Изменено 28 июля, 2016 пользователем L2Banners

[L2Banners 664]

================== Анимация №2 (Прыжки с тенью) ============================

 

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

.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 добавляем класс:

class="l2banners_animation_2"

Изменено 29 июля, 2016 пользователем L2Banners

[L2Banners 664]

================== Анимация №3 (Движение влево<=>вправо) ============================

 

 

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

.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 добавляем класс:

class="l2banners_animation_3"

[L2Banners 664]

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

 

 

 

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

 

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

.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 добавляем класс:

class="l2banners_animation_4"

[L2Banners 664]

================== Анимация №5 (Появление <> Исчезновение) ============================

 

 

Еще одна очень простая, но не менее интересная анимация

 

 

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

.l2banners_animation_5 {
animation: l2banners_opacity  4s infinite;
}

@keyframes l2banners_opacity {
from {
  opacity: 1;
  }
50% {
  opacity: 0;
  }
to {
  opacity: 1;
  }
}

В файле server.tpl добавляем класс:

class="l2banners_animation_5"

Изменено 3 августа, 2016 пользователем L2Banners

[L2Banners 664]

================== Анимация №6 (Свечение вокруг текста) ============================

 

Еще одна анимация. Она более индивидуальная. Свечение вокруг текста, который находится в вашем статусе. Работает только на текст. По умолчанию стоит белый цвет, но без труда можно поменять на любой.

 

 

 

 

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

.l2banners_animation_6 {
animation: l2banners_shadow  4s infinite;
}

@keyframes l2banners_shadow {
from {
  text-shadow: none;
  }
74% {
  text-shadow: none;
  }
75% {
  text-shadow: 0 0 1px #fff;
  }
80% {
  text-shadow: 0 0 50px #fff;
  }
to {
  text-shadow: none;
  }
}

В файле server.tpl добавляем класс:

class="l2banners_animation_6"

[Warak 47]

Сорри, что влез в твою тему. Но очень красивая анимация в стиле неоновой вывески. Думаю в тему=) 

http://codepen.io/chriscoyier/pen/FmnGj тут код

 

Пример:

[L2Banners 664]

Сорри, что влез в твою тему. Но очень красивая анимация в стиле неоновой вывески. Думаю в тему=)

Вообще не в тему...

[GoodDev 79]

Очень круто, спасибо огромное тебе за тему, обновил для себя знания + некоторое для себя новое нашел )

[L2Banners 664]

Очень круто, спасибо огромное тебе за тему, обновил для себя знания + некоторое для себя новое нашел )

Пожалуйста. Будет время, будут еще анимации.

[CrazyCort 26]

Как сделать что бы на каждый статус была своя анимация?

[L2Banners 664]

Как сделать что бы на каждый статус была своя анимация?

Дописать к классу псевдоэлемент nth-child

 

Например у нас 2 сервера и мы хотим, что бы двигался второй:

.l2banners_serv_animation_1:nth-child(2)  {
animation: l2banners_scale  2s infinite;
}

Что бы все работало, блоки анимаций должны находится на одном уровне. В данном случае вам помогут более глубокие знания о псевдоэлементах  nth-child

Изменено 30 сентября, 2016 пользователем L2Banners

[CrazyCort 26]

Помогите реализовать под ghtweb  5.

Изменено 5 октября, 2016 пользователем CrazyCort

[L2Banners 664]

Помогите реализовать под ghtweb  5.

Покажите код своего статуса

[CrazyCort 26]

Покажите код своего статуса

Стандартный круг.

[L2Banners 664]

Стандартный круг.

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

[CrazyCort 26]

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

<?php 
 
class ServerStatus extends CWidget
{
    public function init()
    {
        if(($data = cache()->get(CacheNames::SERVER_STATUS)) === FALSE)
        {
            if(config('server_status.allow') == 1)
            {
                $data['content']     = array();
                $data['totalOnline'] = 0;

                $criteria = new CDbCriteria(array(
                    'select' => 't.name, t.id, t.fake_online, t.ip, t.port',
                    'scopes' => array('opened'),
                    'with'   => array('ls' => array(
                        'select' => 'ls.ip, ls.port, ls.name',
                        'scopes' => array('opened'),
                    ))
                ));

                $gsList = Gs::model()->findAll($criteria);

                if($gsList)
                {
                    foreach($gsList as $gs)
                    {
                        try
                        {
                            $l2 = l2('gs', $gs->id)->connect();

                            // Кол-во игроков
                            $online = $l2->getDb()->createCommand("SELECT COUNT(0) FROM `characters` WHERE `online` = 1")->queryScalar();

                            // Fake online
                            if(is_numeric($gs->fake_online) && $gs->fake_online > 0)
                            {
                                $online += Lineage::fakeOnline($online, $gs->fake_online);
                            }

                            $data['content'][$gs->id] = array(
                                'gs_status' => Lineage::getServerStatus($gs->ip, $gs->port),
                                'ls_status' => (isset($gs->ls) ? Lineage::getServerStatus($gs->ls->ip, $gs->ls->port) : 'offline'),
                                'online'    => $online,
                                'gs'        => $gs,
                            );

                            $data['totalOnline'] += $online;
                        }
                        catch(Exception $e)
                        {
                            $data[$gs->id]['error'] = $e->getMessage();
                        }
                    }
                }

                if(config('server_status.cache') > 0)
                {
                    cache()->set(CacheNames::SERVER_STATUS, $data, config('server_status.cache') * 60);
                }
            }
        }

        app()->controller->renderPartial('//server-status', $data);
    }
}
 

[L2Banners 664]

 

Это функция вывода онлайна как я понимаю, а нужен именно код с html, который должен находится в шаблоне. Я бы вам подсказал, но я не работаю с гхт веб, у меня он даже сейчас не установлен. Если я не ошибаюсь там файл называется что-то типа  status.php Хотя его вроде каждый называет как хочет, смотря какой шаблон. та должны быть теги <table> <div> или что-то подобное. Напишите мне в скайп, будет время посмотрю через тв.

[vzakone 2]

делаю все правельно , но результата 0, как непробавал нечего недвигается)

[L2Banners 664]

делаю все правельно , но результата 0, как непробавал нечего недвигается)

Значит что-то неправильно делаете...

Скиньте ссылку на сайт в личку.

И код своего server.tpl сюда скопируйте.

[SmokiMo 892]

Создайте все это дело в раздел мануалов

[L2Banners 664]

================== Анимация №7 (Вибрация №1) ============================

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

.l2banners_animation_7 {
    -webkit-animation: vibrate-1 0.3s linear infinite both;
            animation: vibrate-1 0.3s linear infinite both;
 position: relative;
}

@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

В файле server.tpl добавляем класс:

class="l2banners_animation_7"

[Urban 78]

Круто так держать...

[mrSmith 49]

полезная статья

[L2Banners 664]

Добавил статью в мануалы, теперь наверное буду обновлять её там