L2Banners

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

В теме 25 сообщений

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

В этой теме я буду писать инструкции о том, как сделать различные анимации на примере статуса серверов движка 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
  • Upvote 15

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

================== Анимация №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
  • Upvote 8

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

================== Анимация №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"
  • Upvote 7

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

================== Анимация №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"
  • Upvote 7

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

================== Анимация №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
  • Upvote 5

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

================== Анимация №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"
  • Upvote 4

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

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

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

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

Изменено пользователем L2Banners
  • Upvote 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Изменено пользователем CrazyCort

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

l2banners_animation_7.gif


В 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"
  • Upvote 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу