RSO Component

LƯU Ý:

Đây là trang component được sử dụng nội bộ bởi Wiki SCP-VN. Trang này được tạo để sử dụng và thêm vào các trang khác.

What this is

A component that makes everything on the page smoothly fade in, instead of appearing instantly when the page loads.

The fade can also be staggered, with each thing on the page appearing one by one instead of all at once.

Usage

On any wiki:

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

speed=1: everything appears at the same time
speed=2: everything appears 0.5s after the last thing
speed=3: everything appears 0.25s after the last thing

Caveats

The fade-in effect will only apply to elements that are direct children of #page-content. It won't apply to nested elements (e.g. stuff inside a blockquote or a div) or other parts of the page (e.g the sidebar).

(You can use this to your advantage if there are other animations on your page that would conflict (e.g ACS Animation) by simply wrapping the problematic animated element in a div.)

It also only applies to the first 15 elements on the page, and everything else after that will appear at the same time. This is enough for a smooth load-in experience when a reader opens the page, but if they want to scroll right to the bottom, they're able to do that without having to wait very long.

---

Source code

@media screen and (prefers-reduced-motion: no-preference) {
  #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(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }

:root {
   --fade-in-delay: 0.5s;
}

:root {
  --fade-in-delay: 0.25s;
}

On any wiki:

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

This is a component I use to easily change the formatting on all my articles. I update it all the time according to my tastes and what I want my articles to look like. If you use it and it breaks your page, I am not responsible.