component:level-class-animation
Элегантный компонент для добавления плавной анимации появления к системам классификации уровней и любым другим блокам на странице.
Особенности:
- Исправлен баг рендеринга текстур и масок (ромбов) в Базовом Классе Уровней при анимации.
- Автоматически подхватывает Базовый класс, НКУ и другие системы.
- Универсальные классы для анимации любого произвольного контента (цитат, таблиц, инфобоксов).
Использование
Чтобы добавить анимацию систем классификации на страницу, просто включите этот компонент в самом верху вашей статьи:
[[include component:level-class-animation]]
Если вы хотите изменить скорость анимации (по умолчанию она равна 1), передайте параметр `speed`. Чем больше значение, тем быстрее анимация:
[[include component:level-class-animation
|speed=1.5
]]
Универсальные классы (Анимация чего угодно)
Вы можете добавить плавное появление любому блоку на странице, просто дописав один из этих классов к его `div`:
.anim-fade— Плавное появление с легким увеличением (Fade + Scale)..anim-right— Выезд слева направо (Slide Right)..anim-up— Выезд снизу вверх (Slide Up).
Пример использования:
[[div class="blockquote anim-right"]]
Эта цитата плавно выедет слева!
[[/div]]
Базовый Класс Уровней (Level Class)
СЛОЖНОСТЬ ВЫЖИВАНИЯ:
Класс 1
- {$one}
- {$two}
- {$three}
Как использовать:
[[include component:level-class
|class=КЛАСС
]]
Допустимые параметры:
- 0
- 1
- 2
- 3
- 4
- 5
- 5e
- e
- unknown
- habitable
- deadzone
- pending
- n/a
- amended
- omega
- integral
Кастомные классы:
[[include component:level-class
|class=ИмяКласса
|color=#000000 (Hex код цвета с хэшегом)
|image=URL (URL-ссылка на изображение)
|one=Напишите здесь
|two=Любой текст
|three=Который захотите
]]
Кастомизация с CSS:
Это дополнительные элементы настройки, которые вы можете выполнить с помощью CSS, добавив код в[[module css]] или в тему страницы. Пишите [[module css]] снаружи [[include]] для этого компонента, поместите его под ним или вверху или внизу страницы.Добавьте это на свою страницу/тему, чтобы отредактировать все цвета, поскольку часть |color= компонента управляет только фоном:[[module css]]
.sd-container {
/* шрифт */
--sd-font:Poppins;
/* рамка */
--sd-border:var(--gray-monochrome); /* для большинства классов */
--sd-border-secondary:0,0,0; /* для н/д */
--sd-border-deadzone:20,0,0; /* для мёртвой зоны */
--sd-border-e:73,90,52; /* для э */
/* символы */
--sd-symbol:var(--sd-border) !important; /* для большинства символов */
--sd-symbol-secondary: 255,255,255; /* белый для класса 4 и выше */
/* текст */
--sd-bullets:var(--sd-border) !important; /* цвет текста маркера */
--sd-text:var(--swatch-text-secondary-color); /* цвет текста в верхнем поле */
/* цвета классов */
--class-0:247,227,117;
--class-1:247,227,117;
--class-1:255,201,14;
--class-2:245,156,0;
--class-3:249,90,0;
--class-4:254,23,1;
--class-5:175,6,6;
--class-5e:175,6,6;
--class-e:229,223,27;
--class-unknown:38,38,38;
--class-habitable:26,128,111;
--class-deadzone:44,13,12;
--class-pending:182,182,182;
--class-n-a:38,38,38;
--class-amended:185,135,212;
--class-omega:25,46,255;
--class-integral:205,238,255;
}
[[/module]]
Старые цвета:
Если вы хотите вернуть старый красный цвет рамки вместо новых тематических, просто добавьте на свою страницу вместе с компонентом:[[module css]]
.sd-container {
--sd-border:90,29,27;
--sd-image:90,29,27;
--sd-symbol:90,29,27;
}
[[/module]]
Текстура (шум) и боковой ромб теперь отображаются корректно благодаря использованию `transform` вместо `clip-path`.
Новый Класс Уровня (НКУ / NuLevelClass)
УРОВЕНЬ
184
СЛОЖНОСТЬ ВЫЖИВАНИЯ
КЛАСС 5
Выход: 5/5
Тупик
Окружение: 5/5
Мёртвая Зона
Сущности: 5/5
Огромное Количество Сущностей
Примечания
- Анимация проигрывается один раз при загрузке страницы.
- Из-за особенностей движка WikiJump (тегов `[[iftags]]`), прямое включение некоторых компонентов на странице документации (у которой есть тег `компонент`) скрывает их тело. Поэтому в демонстрации выше используется точный HTML-макет НКУ. На реальных статьях (без тега `компонент`) они будут работать идеально через обычный `[[include]]`.
- Оригинальная идея компонента принадлежит H_W (Backrooms Wiki CN).