NOTICE:
This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.
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 be staggered, with each thing on the page appearing one by one instead of all at once.
⚠️ Warning: This component can present a hostile reading experience for some users, especially when staggered. I recommend not using this component, and advising other authors to do the same.
⛔️ Not suitable for: Any page where the reader might not start at the top of the page, e.g. hubs or any page with a table of contents.
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.2s after the last thing (not recommended)
speed=3: everything appears 0.1s after the last thing (not recommended)
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.)
To alleviate the negative impact on readers, the fade in animation only applies to the first 15 elements on the page, and everything else after that will appear at the same time.
Removing from other themes
Some CSS themes bundle Fade In by default (BLANKSTYLE CSS, Flopstyle: LITE, Foxtrot Theme and Queerstyle CSS at the time of writing). If you'd like to use those themes without Fade In, you can disable it with the following:
[[module CSS]]
:root {
--fade-in: none;
}
[[/module]]
Source code
:where(:root) { --fade-in: fadeIn; --fade-in-delay:0s; } /*Disableforhubpages, duetothereaderbeinglikelytowanttostartreadingelsewherethanthetopofthepage*/ :root:has(#page-tagsa[href*=hub]), /*Disableforpageswithatableofcontents, astheuserislikelytojumpdirectlytowheretheywanttostartreading*/ :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; }@keyframesfadeIn{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; }
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.