PJPSS Component

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;
}
 
/* Disable for hub pages, due to the reader being likely to want to start reading elsewhere than the top of the page */
:root:has(#page-tags a[href*=hub]),
/* Disable for pages with a table of contents, as the user is likely to jump directly to where they want to start reading */
: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;
}
rating: +12+–x

On any wiki:

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

This is a repository for the various custom CSS I use for all of my articles. I'll end up editing this as my tastes change, so use it at your own risk. Currently, this includes:

  • Thinner horizontal rule.
  • Custom interview, blockquote, and addendum boxes.
  • Hides the page title.
  • Adds an indent to bulleted lists.
    • Like this!

FEATURES

Addendum Box

Interview Box

Blockquote with some thin horizontal rules

ALSO STARRING

BLACK HIGHLIGHTER THEME

BHL DARK AND HIDDEN SIDEBAR

CENTERED HEADER

ACS ANIMATION

#page-title {
    display: none;
}
 
#page-content hr {
  border: solid 0.02em #000000 !important;
  background: #000000 !important;
  height: 0.02em !important;
  display: block !important;
  box-shadow: none !important;
  margin: 1em 0 !important;
}
 
#page-content > .collapsible-block {
    display: block;
    text-align: left;
    padding: 1px;
    margin: 5px auto;
    border: none;
}
 
#page-content > .collapsible-block .collapsible-block-content {
    text-align: left;
}
 
.info-container .collapsible-block-folded a,
.info-container .collapsible-block-unfolded-link a {
    color: #FFF;
}
 
blockquote,
div.blockquote {
    border: 0.125rem solid #d4d4d4;
    background-color: #F5F5F5;
}
 
.interview {
    border: solid 2px #d4d4d4;
    background: #F5F5F5;
    width: 90%;
    padding: 1px 15px;
    margin: 10px auto;
    box-shadow: 1px 1px 4px #5e5e5e82;
}
 
.addendum {
    border-left: solid 5px #642c2c;
    background: #ffffff;
    box-shadow: 1px 1px 4px #5e5e5e82;
    width: 90%;
    padding: 1px 15px;
    margin: 10px auto;
}
 
#page-content ul:not(.yui-nav) {
  list-style-position: outside;
  margin: .25em 0 1em 2em;
  padding: 0;
}
 
#page-content ul:not(.yui-nav) > li {
  line-height: 1.4;
  margin: .25em 0;
}
 
#page-content ul:not(.yui-nav) > li:last-child {
  padding-bottom: .25em;
}
 
#page-content ul ul:not(.yui-nav) {
  margin: .35em 0 .6em 1.5em;
}
 
#page-content ul ul:not(.yui-nav) > li {
  margin: .15em 0;
}
 
#page-content ul ul:not(.yui-nav) > li:first-child { margin-top: 0; }
#page-content ul ul:not(.yui-nav) > li:last-child  { padding-bottom: 0; }
 
@media (max-width: 768px) {
  #page-content ul:not(.yui-nav) { margin-left: 2.4em; }
  #page-content ul:not(.yui-nav) > li { line-height: 1.3; }
  #page-content ul ul:not(.yui-nav) { margin-left: 1.2em; }
}
 
:root {
    --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
}

rating: +12+–x
Pretty self explanatory.
For anyone who really wants the dark sidebar from the O.G. BHL on their articles.
Just add this include AFTER the BHL include:
[[include :scp-wiki:component:bhl-dark-sidebar]]
+ Show component code

rating: +12+–x

What this does

Rearranges the header so that the titles and logos are centered

How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

[[include :scp-wiki:component:centered-header-bhl]]

+ Show component code

rating: +12+–x

What this does

Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.

How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

[[include :scp-wiki:component:toggle-sidebar-bhl]]

3. (Optional) Style toggle button if using a theme.

There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found here.

:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}

+ Show component code

This is a component that animates the ACS header upon loading.

How to use:

Put this in anywhere in the article:

[[include :scp-wiki:component:acs-animation]]

And you're done!

Example: SCP-5935

Note:

- Two variables, --timeScale and --timeDelay, control the timings of the animation. For example:

[[module CSS]]
:root {
--timeScale: 2;
--timeDelay: 0.5s;
}
[[/module]]

--timeScale slows down the entire animation by a factor of 2, and --timeDelay delays the starting point of the animation by half a second. Default values are 1 and 0s, respectively.

To change the default values, put the above after the [[include]]. --timeDelay is recommended if the ACS isn't the first content element, or you're using it in conjunction with other animation modules (a la Fade In.)

- Likely incompatible with other types of ACS headers*.

*To use with PeppersGhostPeppersGhost's ACS Lite, add the following patch after the [[include]]:

[[module CSS]]
/*-- ACS Lite Animation Compatibility Patch --*/
.anom-bar > .bottom-box::before { display: none; }
.anom-bar > .bottom-box { box-shadow: none!important; }
div.diamond-part { clip-path: none; animation: none; box-shadow: none!important; }
@media (max-width: 480px) {
div.top-right-box { clip-path: polygon(0% -30%, 100% -30%, 100% 130%, 0% 130%); }
}
[[/module]]

- Inspired by the works of AnAnomalousWriterAnAnomalousWriter.

Source Code:

:root {
    --timeScale: 1;
    --timeDelay: 0s;
}
 
/* Converting middle divider from box-shadow to ::before pseudo-element */
.anom-bar > div.bottom-box { box-shadow: none; position: relative; }
.anom-bar > div.bottom-box::before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.5rem;
    bottom: 100%; left: 0;
    background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));
}
 
/* DIVIDER */
.anom-bar > .bottom-box::before {
    animation-name: divider;
    animation-duration: calc(0.74s * var(--timeScale));
    animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
 
/* CLASSIFIED LEVEL BARS */
div.top-center-box  > * {
    animation-name: bar;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
div.top-center-box > :nth-child(1) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(2) { animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(3) { animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(4) { animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(5) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(6) { animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
 
/* TOP TEXT */
div.top-left-box, div.top-right-box {
    clip-path: polygon( 0% -50%, 150% -50%, 150% 100%, 0% 100%);
}
 
div.top-left-box > *, div.top-right-box > * {
    position: relative;
    animation-name: bottomup;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* CONTAINMENT, DISRUPTION, RISK CLASSES */
div.text-part > * {
    clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    animation-name: expand2;
    animation-duration: calc(0.5s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.text-part > :nth-child(1) {
    animation-name: expand1;
}
div.text-part > :nth-child(1) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(2) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(3) { animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }
 
div.main-class::before, div.main-class::after {
    animation-name: iconslide;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 /* BOTTOM TEXT */
div.main-class > *,  div.disrupt-class > *, div.risk-class > * {
    white-space: nowrap;
    animation-name: flowIn;
    animation-duration: calc(0.42s * var(--timeScale));
    animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* DIAMOND */
div.arrows {
    animation-name: arrowspin;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.55s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.quadrants > * {
    animation-name: fade;
    animation-duration: calc(0.3s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.top-icon, div.right-icon, div.left-icon, div.bottom-icon {
    animation-name: nodegrow;
    animation-duration: calc(0.4s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
.bottom-box > div.diamond-part {
    box-shadow: none;
}
.bottom-box > div.diamond-part::before {
    content: "";
    position: absolute;
    width: 0.5rem; height: 100%;
    top: 0; right: 100%;
    background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));
    animation-name: diamondBorder;
    animation-duration: calc(0.475s * var(--timeScale));
    animation-delay: calc(0.775s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.28,.72,.55,.91);
    animation-fill-mode: backwards;
}
 
/* MOBILE QUERY */
@media (max-width: 480px ) {
    .anom-bar > div.bottom-box { position: initial; }
    .anom-bar > div.bottom-box::before { bottom: initial; top: 40vw; }
    div.top-center-box  > * {
        animation-name: bar-mobile;
        animation-duration: calc(0.9s * var(--timeScale));
    }
    div.top-center-box > :nth-child(1) { animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(2) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(3) { animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(4) { animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(5) { animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(6) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
 
}
 
/*--- Motion Accessibility ---*/
@media screen and (prefers-reduced-motion: reduce) {
    div.anom-bar-container { --timeScale: 0!important; }
}
 
/*-------------------------*/
 
@keyframes divider {
    from { max-width: 0%;  }
    to { max-width: 100%; }
}
 
@keyframes bar {
    from { max-width: 0%; }
    to { max-width: 100%; }
}
@keyframes bar-mobile {
    from { max-height: 0%; }
    to { max-height: 100%; }
}
 
@keyframes bottomup {
    from { top: 100px; }
    to { top: 0; }
}
 
@keyframes expand1 {
    from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); }
    to { opacity: 1; clip-path: inset(0); }
}
@keyframes iconslide {
    from { opacity: 0; transform: translateX(-5rem); }
    to { opacity: 1; transform: translateX(0); }
}
 
@keyframes expand2 {
    from { opacity: 0; width: 1%; }
    to { opacity: 1; width: calc(100% - 0.25rem); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@keyframes flowIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
 
@keyframes arrowspin {
    from { clip-path: circle(0%); transform: rotate(135deg); }
    to { clip-path: circle(75%); transform: rotate(0deg); }
}
@keyframes nodegrow {
    from { transform: scale(0);}
    to {  transform: scale(1);}
}
@keyframes diamondBorder {
    from { height: 0; }
    to { height: 100%; }
}

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;
}
 
/* Disable for hub pages, due to the reader being likely to want to start reading elsewhere than the top of the page */
:root:has(#page-tags a[href*=hub]),
/* Disable for pages with a table of contents, as the user is likely to jump directly to where they want to start reading */
: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;
}
component
page revision: 49, last edited: 01 Oct 2025 20:53
Edit Rate (+12) Tags Discuss (2) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License