Компонент RSO

СТОРІНКА ШАБЛОНУ

Це сторінка шаблону, який використовується у цієї Wiki.

Будь ласка, не редагуйте цю сторінку
без дозволу адміністрації сайту

Що це таке

Шаблон, який змушує усе на сторінці поступово проявлятися, замість того аби з'явитися одразу після завантаження сторінки.

Проява також може відбуватися у шаховому порядку, коли усі елементи на сторінці з'являються по черзі.

Використання

На будь-якій вікі:

[[include component:fade-in speed=1]]

speed=1: усе проявляється одночасно.
speed=2: усе проявляється поступово з затримкою у пів секунди
speed=3: усе проявляється поступово з затримкою у чверть секунди

Застереження

Ефект прояви застосовуватиметься лише до тих елементів, які є дочірніми до #page-content. Він не пошириться на інтегровані елементи (наприклад, написи всередині блоку цитування або div) або інші частини сторінки (наприклад, бічну панель).

(Ви можете, якщо вам дуже кортить, використовувати його на сторінці разом з іншими анімаціями, які можуть конфліктувати (наприклад: Анімована СКА) просто помістивши проблемне місце у div.)

Також, це стосується тільки перших 35 елементів на сторінці, усі інші будуть показуватися одночасно. Цього достатньо для плавного завантаження, коли читач відкриває сторінку, однак якщо хтось захоче прокрутити сторінку донизу, то він може зробити це, не чекаючи на повільне завантаження.

Джерельний код

#page-title, #breadcrumbs, #page-content > * {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards;
}
 
#page-title { animation-delay: 0s; }
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0,30px);
  }
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}
 
:root {
  --fade-in-delay: 0s;
}
 
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(16) { animation-delay: calc(16 * var(--fade-in-delay)); }
#page-content > :nth-child(17) { animation-delay: calc(17 * var(--fade-in-delay)); }
#page-content > :nth-child(18) { animation-delay: calc(18 * var(--fade-in-delay)); }
#page-content > :nth-child(19) { animation-delay: calc(19 * var(--fade-in-delay)); }
#page-content > :nth-child(20) { animation-delay: calc(20 * var(--fade-in-delay)); }
#page-content > :nth-child(21) { animation-delay: calc(21 * var(--fade-in-delay)); }
#page-content > :nth-child(22) { animation-delay: calc(22 * var(--fade-in-delay)); }
#page-content > :nth-child(23) { animation-delay: calc(23 * var(--fade-in-delay)); }
#page-content > :nth-child(24) { animation-delay: calc(24 * var(--fade-in-delay)); }
#page-content > :nth-child(25) { animation-delay: calc(25 * var(--fade-in-delay)); }
#page-content > :nth-child(26) { animation-delay: calc(26 * var(--fade-in-delay)); }
#page-content > :nth-child(27) { animation-delay: calc(27 * var(--fade-in-delay)); }
#page-content > :nth-child(28) { animation-delay: calc(28 * var(--fade-in-delay)); }
#page-content > :nth-child(29) { animation-delay: calc(29 * var(--fade-in-delay)); }
#page-content > :nth-child(30) { animation-delay: calc(30 * var(--fade-in-delay)); }
#page-content > :nth-child(31) { animation-delay: calc(31 * var(--fade-in-delay)); }
#page-content > :nth-child(32) { animation-delay: calc(32 * var(--fade-in-delay)); }
#page-content > :nth-child(33) { animation-delay: calc(33 * var(--fade-in-delay)); }
#page-content > :nth-child(34) { animation-delay: calc(34 * var(--fade-in-delay)); }
#page-content > :nth-child(35) { animation-delay: calc(35 * var(--fade-in-delay)); }
#page-content > :nth-child(n+35) { animation-delay: calc(36 * var(--fade-in-delay)); }
:root {
   --fade-in-delay: 0.5s;
}
:root {
  --fade-in-delay: 0.25s;
}

рейтинг: 0+–x
Коротусенький самоопис
Для будь-кого хто дійсно бажає для своїх текстів темний сайдбар від O.G. BHL.
Лише пишіть свій текст ПІСЛЯ директиви include:
[[include component:bhl-dark-sidebar]]
+ Показати код компонента

рейтинг: 0+–x

На будь-якому сайті:

[[include component:rso]]

Це я зберігаю про запас.

_component_xen
версія сторінки: 2, останнє редагування: 14 Jun 2023 13:07
Редагувати Оцінити (0) Теґи Історія Файли Друкувати Інструменти сайту + Налаштування
Якщо не зазначено інше, вміст цієї сторінки доступний на умовах ліцензії Creative Commons Attribution-ShareAlike 3.0 License