NOTICE:
This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.
Synopsis
This component consists of 5 different elements that be used alongside each other for really cool effects:
- A plaintext element (allows more complex stylizations than wikidot formatting)
- A "Glitch Text" element that can have text styles applied like the plaintext element and Animations!
- Glitch text that can have a link attached to it so it sends readers somewhere when they click it (for secrets)
- One, as in a single, animated div element (It's explained further down why there's only one)
Step 1 - Include Argument:
[[include :scp-wiki:component:glitch-elements]]
This is what adds all of the relevant code from this component to your page. Nothing will work if you don't add this.
It's best to place this include argument AFTER any include arguments for themes or components that change the pages contents like "croqstyle".
Step 2 - A Basic Span:
This component doesn't have it's own elements per say, it's really just a collection of premade styles and animations that you can apply to HTML objects (mostly just spans). Like So:
Example:
[[span class="style03-plaintext animation03" style="--content: "We Die in the Darkness";"]]We Die in the Darkness[[/span]]
Result:
We Die in the Darkness
Template:
[[span class="{style-class} {animation-class}" style="--content: "{Text Content}";"]]{Text Content}[[/span]]
You'll notice the bolded bits in the template above; those are the main field's you'll have on almost every span you use this component on:
- The "{style-class}" is what determines things like font color, size, etc.
- The "{animation-class}" is self-explanatory; it's what applies a given animation to the element.
- Two versions of the animation class exists - "animation0#" which plays the animations at all times, and "animation0#-hover" which only plays the animation once the span is being hovered by a cursor.
- The "{Text Content}" content field appears in two places. Both "fields" must contain the same text as the "--content" variable which is what allows animations to have multiple layers to animate.
Step 3 - Your Options:
As shown in the step above, there's two types of "classes" that you can apply to an element; the "text-style" & "animation" classes. Here's a table showing them off!
| Plaintext Style | Animation Style | All Together Now |
|---|---|---|
| Text Style 1 | Animation 1 | Together 1 |
| Text Style 2 | Animation 2 | Together 2 |
| Text Style 3 | Animation 3 | Together 3 |
| Text Style 4 | Animation 4 | Together 4 |
| Text Style 5 | Animation 5 | Together 5 |
More Details
This sections is meant to provide details for specific use-cases, or to answer Frequently-Asked-Questions; this section of the page is likely to update over time as people use this component.
