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

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

Автор L2Banners, в Мануалы

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

L2Banners    664

L2Banners
Опубликовано

Это тема поддержки мануала: Анимация статуса сервера и не только

Здесь вы можете обсудить все вопросы, связанные с этой статьёй.

 

Дата добавления: 01 October 2017 - 03:42 AM

Дата обновления: 22 October 2017 - 01:19 AM

  • Upvote 2

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

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

Pepel    11

Pepel
Опубликовано

Для animation, transform и @keyframes префиксы можно не указывать.... не думаю что кто-то из аудитории l2 сидит на IE9.... Ну там еще опера мини.. хотя ей что с префиксами, что без, думаю на нее можно подзабить...

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

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

L2Banners    664

L2Banners
Опубликовано

Новая анимация подъехала

 

================== Анимация №8 (Drag_up) ============================
 
 
l2banners_animation_8.gif
 
В engine.css в самом низу добавляем:

/* Анимация 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.00) scaleY(1.00) ;
  }
  5% {
    transform:  translate(0px,-10px)  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  10% {
    transform:  translate(0px,-21px)  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  15% {
    transform:  translate(0px,-16px)  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  20% {
    transform:  translate(0px,-12px)  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  25% {
    transform:  translate(0px,-7px)  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  30% {
    transform:  translate(0px,-2px)  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  35% {
    transform:  translate(0px,2px)  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  40% {
    transform:  translate(0px,7px)  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  45% {
    transform:  translate(0px,7px)  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }
  50% {
    transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  
  100% {
    transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}

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

class="l2banners_animation_8"
  • Upvote 2

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

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

lacosta    206

lacosta
Опубликовано (изменено)

где тут надо вставить что бы работало 

<script type="text/javascript">
$(document).ready(function(e) {
var rand = function(min, max) {
return Math.floor(arguments.length > 1 ? (max - min + 1) * Math.random() + min : (min + 1) * Math.random());
};
 
$('.load .line').width(0);
        $('#status .item').each(function(i, el) {
 
var serv = $(el);
 
        var online = $(el).find('.sonline span').html();
 
        //var num = 0;
//var up_up = setInterval( function() {
//if(num > online){
//clearInterval(up_up);
//}
//num = parseFloat(num) + parseFloat(rand(1,1));
//num =  Math.ceil(num);
 
//serv.find('.sonline span').html(num);
//}, 100);
 
$(el).find('.line').animate({width:online/2000*227},3000);//значение 2000 является максимальным онлайном для заполнения, то есть при онлайне 3000 человек полоска будет полносьтю заполнена, но это значение можно менять так как вам удобно, например выставив 5000, полоска будет заполнена полностью только по достижению 5000 человек онлайна.
    });
    });
</script>
[main]
<div id="status">
    {item}
</div>
[/main]
[item]
 
<div class="item">
    <div class="full-name">{name}</div>
    <div class="sonline" style="visibility: hidden;"><span>{online}</span></div>
    <div class="load"><div class="fixed-width"><div class="line"></div></div></div>
</div>
[/item]
Изменено пользователем lacosta

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

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

lacosta    206

lacosta
Опубликовано

class="item l2banners_animation_8"

добавил не чего не поменялось 

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

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

L2Banners    664

L2Banners
Опубликовано (изменено)

добавил не чего не поменялось 

По инструкции делал? http://forummaxi.ru/tutorials/article/373-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D1%8F-%D1%81%D1%82%D0%B0%D1%82%D1%83%D1%81%D0%B0-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%B0-%D0%B8-%D0%BD%D0%B5-%D1%82%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE/

 

адрес сайта?

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

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

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

lacosta    206

lacosta
Опубликовано

делал все как в этой теме написано

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

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

L2Banners    664

L2Banners
Опубликовано (изменено)

делал все как в этой теме написано

Либо что-то неправильно, либо что-то мешает, я никак не могу знать какие еще стили наложены на item. Покажи сайт скажу в чем проблема. Файлы ксс хоть обновились?

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

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

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

Pepel    11

Pepel
Опубликовано

Либо что-то неправильно, либо что-то мешает, я никак не могу знать какие еще стили наложены на item. Покажи сайт скажу в чем проблема. Файлы ксс хоть обновились?

Ну либо каскад, либо кеш браузера...

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

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

Pepel    11

Pepel
Опубликовано

добавил не чего не поменялось 

Напиши мне в скайп, помогу.

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

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

L2Banners    664

L2Banners
Опубликовано

Ну либо каскад, либо кеш браузера...

А я что написал?

 

 

Напиши мне в скайп, помогу.

Уже вроде как все работает

  • Upvote 1

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

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

Pepel    11

Pepel
Опубликовано

А я что написал?

Так я и подтвердил твои слова....

Уже вроде как все работает

 

Ну и хорошо, одним счастливым человеком больше.

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

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

L2Banners    664

L2Banners
Опубликовано

Так я и подтвердил твои слова....

Наверно я не так понял.

  • Upvote 1

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

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

L2Banners    664

L2Banners
Опубликовано

================== Анимация №9 (L_R) ============================
 
 
l2banners_animation_9.gif
 
В engine.css в самом низу добавляем:

/* Анимация 9 */
 
.l2banners_animation_9 {
  animation: animation 5000ms linear infinite both;
}
 
@keyframes animation { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 29.726, 0, 0, 1); }
  2% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 41.325, 0, 0, 1); }
  3% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.6, 0, 0, 1); }
  4% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.266, 0, 0, 1); }
  5% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -18.359, 0, 0, 1); }
  6% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -27.815, 0, 0, 1); }
  7% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -20.539, 0, 0, 1); }
  8% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.471, 0, 0, 1); }
  9% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.404, 0, 0, 1); }
  10% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 18.721, 0, 0, 1); }
  12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.287, 0, 0, 1); }
  14% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -12.6, 0, 0, 1); }
  16% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.506, 0, 0, 1); }
  18% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 8.481, 0, 0, 1); }
  22% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.708, 0, 0, 1); }
  26% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.842, 0, 0, 1); }
  30% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.585, 0, 0, 1); }
  34% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.74, 0, 0, 1); }
  38% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.171, 0, 0, 1); }
  42% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.788, 0, 0, 1); }
  46% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.53, 0, 0, 1); }
  50% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.357, 0, 0, 1); }
  54% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.24, 0, 0, 1); }
  58% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.162, 0, 0, 1); }
  62% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.109, 0, 0, 1); }
  66% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.073, 0, 0, 1); }
  70% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.049, 0, 0, 1); }
  74% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.033, 0, 0, 1); }
  78% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.022, 0, 0, 1); }
  82% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.015, 0, 0, 1); }
  86% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01, 0, 0, 1); }
  90% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1); }
  94% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.005, 0, 0, 1); }
  98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.003, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

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

class="l2banners_animation_9"
  • Upvote 1

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

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

L2Banners    664

L2Banners
Опубликовано

тоже не могу разобраться никак не реагирует 

Адрес сайта можешь скинуть в личку и сказать что именно анимируешь, посмотрю.

  • Upvote 1

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

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

L2Banners    664

L2Banners
Опубликовано (изменено)

По поводу анимации для отдельных серверов, чтобы не повторяться скопировал сообщение со  старой темы:
 

В 11.09.2016 в 11:22, CrazyCort сказал:

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

Дописать к классу псевдоэлемент nth-child
 
Например у нас 2 сервера и мы хотим, что бы двигался второй: 

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

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

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

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

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

L2Banners    664

L2Banners
Опубликовано 
[main]
{item}
[/main]

[item]
<div class='server l2banners_serv_animation_1'>{name}
    <span></span>    
        <div class='bar_bg'>
            <div class='bar' style='width: {online}%'></div>
        </div>    
    <br>Хроники : <b>{chronicle}</b>
</div>
[/item]

 

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

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

Jeffsy    2

Jeffsy
Опубликовано

Очень помогло :) Спасибо большое!

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

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

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

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

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

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

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

Войти

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

Войти
Авторизация  
Подписчики 0
Перейти к списку тем

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

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

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