Перейти к содержимому

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


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 23

#1
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

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

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

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


Сообщение отредактировал L2Banners: 29 July 2016 - 02:05 AM

  • 15

#2
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

 
l2banners_animation_2.gif
 
 
В 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"

Сообщение отредактировал L2Banners: 29 July 2016 - 03:06 AM

  • 8

#3
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

 

l2banners_animation_3.gif

 

Данную анимацию обычно используют вместе со скриптом, что бы можно было менять время задержки, но я её упростил и поставил оптимальную задержку по умолчанию.
 
В 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"

  • 7

#4
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

 

l2banners_animation_4.gif

 

 

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

 

В 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"

  • 7

#5
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

 

l2banners_animation_5.gif

 

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

 

 

В 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"

Сообщение отредактировал L2Banners: 03 August 2016 - 04:16 AM

  • 5

#6
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

 

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

 

l2banners_animation_6.gif

 

 

 

В 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"

  • 4

#7
Warak

Warak
  • сообщений: 212
  • Репутация 47

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

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

 

Пример:

b8795cc37897ac88caeab94ffe6e80ba.gif


  • 1

#8
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

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


  • 0

#9
Fine

Fine
  • сообщений: 482
  • Репутация 52

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


  • 0

#10
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

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


  • 0

#11
CrazyCort

CrazyCort
  • сообщений: 360
  • Репутация 21

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


  • 0

#12
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

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

 

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

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

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


Сообщение отредактировал L2Banners: 01 October 2016 - 02:27 AM

  • 2

#13
CrazyCort

CrazyCort
  • сообщений: 360
  • Репутация 21

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


Сообщение отредактировал CrazyCort: 06 October 2016 - 02:10 AM

  • 0

#14
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

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


  • 0

#15
CrazyCort

CrazyCort
  • сообщений: 360
  • Репутация 21

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

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


  • 0

#16
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

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


  • 0

#17
CrazyCort

CrazyCort
  • сообщений: 360
  • Репутация 21

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

<?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);
    }
}
 

  • 0

#18
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

 

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


  • 0

#19
vzakone

vzakone
  • сообщений: 48
  • Репутация 2

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


  • 0

#20
L2Banners

L2Banners
  • сообщений: 701
  • Репутация 359

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

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

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

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


  • 0


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных