L2Banners

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

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

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

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

 

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

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

  • Upvote 2

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


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

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

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


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

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

 

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

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


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

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

<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

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


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

class="item l2banners_animation_8"

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

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


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

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

По инструкции делал? 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

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


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

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


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

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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

 

 

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

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

  • Upvote 1

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


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

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

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

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

 

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

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


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

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

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

  • Upvote 1

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


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

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

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


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

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

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

  • Upvote 1

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


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

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

В 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
  • Downvote 2

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


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

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

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

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

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

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

Войти

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

Войти


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

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