Перейти к содержанию
Авторизация  
L2Banners

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

Рекомендуемые сообщения

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

<?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 пользователей онлайн

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

×
×
  • Создать...