Анимация статуса сервера и не только - Форум администраторов игровых серверов
Форум администраторов игровых серверов StormWall - Защита от DDos атак
Регистрация Мнения Справка Пользователи Календарь Все разделы прочитаны
Вернуться   Форум администраторов игровых серверов > MMO > Lineage II > Движки сайтов (CMS)

Движки сайтов (CMS)
Обсуждения, решения проблем веб обвязок для ява сервера.

Описание темы:Анимация элементов сайта при помощи css

Ответ
Опции темы
Непрочитано 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™ Ответить с цитированием
Сказали спасибо:
Непрочитано 03.08.2016, 04:19   #2
Аватар для L2Banners
Пользователь

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

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



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


В engine.css в самом низу добавляем:
Код HTML:
.l2banners_animation_5 {
animation: l2banners_opacity  4s infinite;
}

@keyframes l2banners_opacity {
from {
  opacity: 1;
  }
50% {
  opacity: 0;
  }
to {
  opacity: 1;
  }
}
В файле server.tpl добавляем класс:
Код HTML:
class="l2banners_animation_5"
L2Banners вне форума Отправить сообщение для L2Banners с помощью Skype™ Ответить с цитированием
Сказали спасибо:
Непрочитано 19.08.2016, 15:22   #3
Аватар для L2Banners
Пользователь

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

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

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



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

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

Код HTML:
class="l2banners_animation_6"
L2Banners вне форума Отправить сообщение для L2Banners с помощью Skype™ Ответить с цитированием
Сказали спасибо:
Непрочитано 11.07.2017, 18:50   #4
Аватар для L2Banners
Пользователь

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

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





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

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

Код HTML:
class="l2banners_animation_7"
L2Banners вне форума Отправить сообщение для L2Banners с помощью Skype™ Ответить с цитированием
Непрочитано 17.03.2018, 05:20   #5
Аватар для L2Banners
Пользователь

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

Анимация №8 (Drag_up)



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

Код HTML:
/* Анимация 8 */
.l2banners_animation_8 {
  animation: l2b_drag_up 3s linear infinite both;
  transform-origin: 50% 50%;
}
@keyframes l2b_drag_up {
  0% {
    transform: translate(0px, 0px) rotate(0deg) scaleX(1) scaleY(1);
  }
  5% {
    transform: translate(0px, -10px) rotate(-3deg) scaleX(0.8) scaleY(0.8);
  }
  10% {
    transform: translate(0px, -21px) rotate(-3deg) scaleX(0.8) scaleY(0.8);
  }
  15% {
    transform: translate(0px, -16px) rotate(3deg) scaleX(1.2) scaleY(1.2);
  }
  20% {
    transform: translate(0px, -12px) rotate(-3deg) scaleX(1.2) scaleY(1.2);
  }
  25% {
    transform: translate(0px, -7px) rotate(3deg) scaleX(1.2) scaleY(1.2);
  }
  30% {
    transform: translate(0px, -2px) rotate(-3deg) scaleX(1.2) scaleY(1.2);
  }
  35% {
    transform: translate(0px, 2px) rotate(3deg) scaleX(1.2) scaleY(1.2);
  }
  40% {
    transform: translate(0px, 7px) rotate(-3deg) scaleX(1.2) scaleY(1.2);
  }
  45% {
    transform: translate(0px, 7px) rotate(3deg) scaleX(1.2) scaleY(1.2);
  }
  50% {
    transform: translate(0px, 0px) rotate(0deg) scaleX(1) scaleY(1);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg) scaleX(1) scaleY(1);
  }
}
В файле server.tpl добавляем класс:

Код HTML:
class="l2banners_animation_8"
__________________
Get-Web.site - Качественная верстка сайтов!
L2Banners вне форума Отправить сообщение для L2Banners с помощью Skype™ Ответить с цитированием
Ответ

Метки
css, html, l2banners, анимация, верстка


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
авто запуск сервера и не только AndruliKxD Курилка / Yak floor 2 31.10.2015 16:37
PHP-скрипт проверки статуса сервера Ergo ArcheAge 8 07.03.2014 12:58
gif для статуса сервера portotiv Курилка / Yak floor 7 22.03.2013 16:59
скрипт статуса сервера gebriel PHP 8 21.04.2011 12:05
Скрипт статуса игрового сервера Hichnick PHP 9 24.11.2008 13:27


© 2007–2024 «Форум администраторов игровых серверов»
Защита сайта от DDoS атак — StormWall
Работает на Булке неизвестной версии с переводом от zCarot
Текущее время: 16:33. Часовой пояс GMT +3.

Вверх