Fade In

Link to article: Fade In.

Module Styles

• @import url(https://scp-wiki.wdfiles.com/local--code/component%3Afade-in/1);
  @import url("https://scp-wiki.wdfiles.com/local--code/component%3Afade-in/{$speed}");

Inline Styles

• border: 1px solid #ddd; padding: 1em;

Includes

• :scp-wiki:component:fade-in [info]

CSS Classes

• code

Page Source

[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/component%3Afade-in/1);
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Afade-in/{$speed}");
[[/module]]

[[iftags +component]]
[[div style="border: 1px solid #ddd; padding: 1em;"]]
+ 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:

[[div class="code"]]
@@[[include :scp-wiki:component:fade-in speed=1]]@@
[[/div]]

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 [[[component:acs-animation | 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.
[[/div]]
-----

+ Source code

[[code type="css"]]
@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)); }
[[/code]]

[[code type="css"]]
:root {
   --fade-in-delay: 0.5s;
}
[[/code]]

[[code type="css"]]
:root {
  --fade-in-delay: 0.25s;
}
[[/code]]

[[/iftags]]