Стильный анимированный баннер пользователей

[MrBurn]

MrBurn добавил(а) новый ресурс:

Стильный анимированный баннер пользователей - Добавит анимацию для баннера юзверя

Модификация для версии движка - XenForo 2.x.x
Автор данной модификации - MrBurn

(Данное решение я публиковал в 2019 году у себя на форуме, поэтому описание оттуда без изменений.)
Покопавшись по ресурсам XenForo в интернете, не нашел решения анимации баннера. Написал своё, используя мануалы CSS. Если есть "косяки", подскажите, исправим вместе. Работает данный вариант отлично.

В данной теме я распишу как создать баннер пользователя используя CSS. Покажу как добавить анимацию, есть несколько...

Узнать больше об этом ресурсе...

 

[Skaiman]

Если есть "косяки", подскажите, исправим вместе. Работает данный вариант отлично.

Не будем касаться шага первого и второго, они сейчас не важны, шаг третий, где то взят (это не не возбраняется), но подогнан просто методом тыка :)
1. Используется класс message-userBanner, это значит анимация применится только к баннерам в сообщениях, лучше использовать userBanner
2. Класс shine span, ну явно из кода исходника и ни к чему в данный момент не относится.
3. Используя префиксы браузеров, то и для всех надо указывать не только для хрома и мазилы:

animation: animate-shine 2s ease-out infinite;
-webkit-animation: animate-shine 2s ease-out infinite;
-moz-animation: animate-shine 2s ease-out infinite;

но как бы современные браузеры обходятся уже без префиксов во многих случаях.
4. Анимация указана одна animate-shine, а ключевых кадров для двух и снова префиксы только для хрома:

@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}

не указаны для нее свойства.
В итоге предлагаю сделать код третьего шага таким:

.userBanner {
    position: relative;
    &:after {
        content: '';
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #fff;
        animation: animate-shine 2s ease-out infinite;
    } 
}

@keyframes animate-shine {
    0% {
        opacity: .1;
        width: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 0;
        width: 100%;
    }
}

Немного сдвинул ключевой кадр

 

[MrBurn]

Анимация указана одна animate-shine, а ключевых кадров для двух

Я имел 2 варианта анимации, второй как у тебя в теме, я его убрал поэтому немного недоубрал код.
Благодарю за упрощенное решение. Отредактирую ресурс.

 

[ikutaxova]

а вот как такие большие аватары сделать, как у вас в теме

 

[Mirovinger]

Вопрос не по теме, но ответ здесь - [XFI] Avatar Toolbox.

 

[Alexandra Sakharova]

Можно результат оживить? (фотография не найдена)

 

[Skaiman]

 

[mikehoover123]

Посмотреть вложение 119740

кааак, скажите пожалуйста extra.less, как точно так-же сделать, у меня не получается))

 

[25517]

mikehoover123, Стильный анимированный баннер пользователей.
Там всё описано.

Более подробно описано здесь: Правила нашего форума

 

[mikehoover123]

mikehoover123, Стильный анимированный баннер пользователей.
Там всё описано.

Более подробно описано здесь: Правила нашего форума

Да-да..
Мне бы просто код, как он это сделал, верный, ибо я не понимаю что я делаю не так..

 

[Atikin]

mikehoover123, Вы, видимо, не рассмотрели.

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[KRAVCHUK]

Как то можно убрать анимацию в конкретном баннере?

 

[Skaiman]

Как то можно убрать анимацию в конкретном баннере?

animation: none;

 

[kappa04]

animation: none;

это, я так понимаю, не так делается?

.userBanner-user {
  font-size: 75%;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  animation: none;
}

 

[Follover]

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

 

[Skaiman]

Возможно ли сделать разные анимации для групп

Конечно возможно

подскажите пожалуйста код или что изменить.

Ну так если анимации разные, то и код будет разный и кто же знает какая анимация нужна.

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Follover]

Конечно возможно

Ну так если анимации разные, то и код будет разный и кто же знает какая анимация нужна.

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

 

[Topik]

Возможно такую анимацию поставить на префексы? Если да, то как?

 

[Matew]

Возможно такую анимацию поставить на префексы? Если да, то как?

Блин, ну настолько простую хрень то уже может можно самому попытаться сделать?

 

[Skaiman]

Возможно такую анимацию поставить на префексы? Если да, то как?

просто изменить класс .userBanner на .label Использовать код

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация