RSO 组件

注意

此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

---

这是什么

一个能够让页面上的所有东西平滑渐显而不是立即在页面加载之后出现的组件。

渐变可以是交错的，也就是页面上的每一件东西都一个接一个地出现而不是全都一次性出现。

⚠️ 警告：此组件可能会给一些用户带来不友好的阅读体验，尤其是在交错时。我建议不要使用此组件，并建议其他作者也这样做。

⛔️ 不适用于：任何读者可能不会从页面顶部开始的页面，例如中心页或任何带有目录的页面。

用法

在任意维基上：

[[include :scp-wiki-cn:component:fade-in speed=1]]

speed=1：所有东西都同时显现
speed=2：所有东西都在上一个东西显现后0.5s显现
speed=3：所有东西都在上一个东西显现后0.25s显现

说明

渐显效果只会应用在是#page-content的直系子元素上。它不会应用到嵌套元素（例如在blockquote（引用框）或div中的东西）或者页面的其它部分（比如侧边栏）中。

（如果你的页面上有其它元素会与此冲突（比如ACS动画）你可以简单地将不确定的动画元素包裹在一个div里面）。

它也只能应用到页面的前15个元素中，且在此以后的所有东西都会同时出现。这对于读者打开页面后的平滑加载阅读体验已经足够了，但如果他们想直接滚动到页面底部的话，也同样可以无需等待太长时间。

从其他版式中移除

一些CSS版式默认包含渐显（空白风格 CSS, Flop风格：浅色, 狐步舞 版式 以及 theme:queerstyle，写这行字的时候）。如果你想要使用这些版式但不带渐显，你可以用下面这个代码禁用它：

[[module CSS]]
:root {
--fade-in: none;
}
[[/module]]

---

源代码

:where(:root) {
  --fade-in: fadeIn;
  --fade-in-delay: 0s;
}
 
/* 中心页禁用，因为读者可能想从页面顶部以外的其他地方开始阅读 */
:root:has(#page-tags a[href*=中心]),
/* 带有目录的页面禁用，因为用户可能会直接跳转到他们想要开始阅读的地方 */
:root:has(#toc) {
  --fade-in: none !important;
}
 
@media (prefers-reduced-motion: no-preference) {
  :where(#page-title, #breadcrumbs, #page-content > *) {
    animation-name: var(--fade-in);
    animation-duration: 0.8s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
  }
}
 
:where(#page-title) { animation-delay: 0s; }
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0,30px);
  }
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}
 
:where(#page-content > :nth-child(1)) { animation-delay: calc(1 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(2)) { animation-delay: calc(2 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(3)) { animation-delay: calc(3 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(4)) { animation-delay: calc(4 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(5)) { animation-delay: calc(5 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(6)) { animation-delay: calc(6 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(7)) { animation-delay: calc(7 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(8)) { animation-delay: calc(8 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(9)) { animation-delay: calc(9 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(10)) { animation-delay: calc(10 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(11)) { animation-delay: calc(11 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(12)) { animation-delay: calc(12 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(13)) { animation-delay: calc(13 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(14)) { animation-delay: calc(14 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(15)) { animation-delay: calc(15 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(n+15)) { animation-delay: calc(16 * var(--fade-in-delay)); }

:where(:root) {
   --fade-in-delay: 0.2s;
}

:where(:root) {
  --fade-in-delay: 0.1s;
}

在任何页面上加入以下代码：

[[include :scp-wiki-cn:component:rso]]

这个组件被我用来轻松地修改我所有文章的格式。我会随时根据我的喜好和我想要我的文章看起来长怎样，来不断地更新这个组件。如果它让你的页面爆炸了话，我概不负责。