JaonHax Demos

Welcome to

Basically, how this works is I show you what I can do with pages, and you (yes, I'm talking to you) let me know if you want me to insert something like one of these into a page you have. Will do stuff for Sandbox and actual SCP pages. Just gotta give me credit for helping out. Gotta get my name out there, ya know?

Also, you've probably already noticed, but I have a bit of tech demo stuff going on right away. This is probably the simplest stuff I can do, though, so keep going if you want to learn how I can trick out your page.

NOTE:
The stuff on my Demos page is not an exhaustive list, and I'm fluent in Google, so I can quickly find out how to do something if I don't already know how. I look forward to doing business with you (assuming you haven't already stopped reading out of boredom)!

---

+ Demo 1: Text Obfuscator Display Using JavaScript

Potential uses

Scrambled SCP number

Can be either sped up for less readability or slowed down for more readability.

Hidden text for a digital SCP

This example has been sped up from its regular speed for showcasing purposes.

Redaction that can partially be seen through

Hidden text that shows up after a certain amount of time and disappears again

+ How do I get this on a page?

The Code

Separated by programming language for ease of understanding. I've also placed a LOT of comments to help explain everything to do with this.

If you use this in a page that gets posted to the Foundation site, please list me as a contributor (or something to that effect) in your Author post (and info bar if applicable)! I'm putting this out there so it's available for people to use in their writing of SCP articles or Tales or whatever they want it for, but I'd really appreciate recognition for providing some of the tools used for telling the story.

That being said, if you'd like my assistance in figuring out some kind of error or want me to add a feature to this/show you how to do something with it, send me a PM on WikiDot.

HTML

Title style

Centered

(Moderator note: this sandbox is preserved here for posterity, but the Technical Content Policy prohibits components hosted off-site. These may not be used on SCP Wiki pages, only sandboxes)

[[include :jaonhax:component:obfuscator-title-centered
|color=#ffffff
|font_weight=600
|font_size=22pt
|delay=0
|start_time=40
|end_time=40
|disp_time=2000
|loop=true
|obfu_chars="0123456789█!<>-_\\/[]{}—=+*^?#"
|phrases=[
'Obfuscator phrase 1.',
'Obfuscator phrase 2.',
'Obfuscator phrase 3.'
]
]]

Normal

[[include :jaonhax:component:obfuscator-title-normal
|color=#ffffff
|font_weight=600
|font_size=22pt
|delay=0
|start_time=40
|end_time=40
|disp_time=2000
|loop=true
|obfu_chars="0123456789█!<>-_\\/[]{}—=+*^?#"
|phrases=[
'Obfuscator phrase 1.',
'Obfuscator phrase 2.',
'Obfuscator phrase 3.'
]
]]

Paragraph Style

[[include :jaonhax:component:obfuscator-paragraph
|text_before=The start of your paragraph goes here.
|text_after=And the end of your paragraph goes here.
|delay=0
|start_time=40
|end_time=40
|disp_time=2000
|loop=true
|obfu_chars="0123456789█!<>-_\\/[]{}—=+*^?#"
|phrases=[
'Obfuscator phrase 1.',
'Obfuscator phrase 2.',
'Obfuscator phrase 3.'
]
]]

---

+ Demo 2: Using the Reader's Username in Text (Now with handling for guest users!)

No matter what account accesses this page, this text will always tell them their username, unless they're a guest and not logged into Wikidot. Which you are. Hello, Mystery Man. Or Mystery Woman. Even Mystery Person. Not judging any of that. Never have (well, except kinda, back when I was too young to realize how bigoted that was), never will. Hopefully, at least.





God, I hope I never become that bigoted.








Ever.

---

+ Demo 3: Animated Collapsibles

I literally have this on the entire page. How have you not seen it yet?
Two disclaimers here: one, this seems to mess up some collapsible components, as this CSS can conflict with custom CSS going on there. Two, this has to be tuned to fit your site. Like you have to measure the height of each of your collapsibles to a range of a few pixels if you want it to look this good. That can be difficult if you don't have a tool like Page Ruler Redux to help you. That thing fucking saved my life while I was measuring these. That thing is the best. Ever.



















lol made you look

---

+ Demo 4: Blur an Image Until Reader Hovers Over With Their Mouse

DISCLAIMER: Images kinda get messed up when you use the Black Highlighter theme, no longer responding to size restrictions. This is why I haven't made this site look fancy besides the animating and stuff.

The SCP Foundation Logo

---

+ Demo 5: Background Image

This is also on the whole page lol

---

+ Demo 6: SCP Terminal

OH MY GOD THIS WORKS! Only thing is, the back and next buttons are broken, so will have to contact Woedenaz to see how to fix it/find out for myself. Other than that, IT WORKS!

ALL CREDIT for this code goes to Woedenaz and their amazing JavaScript skills. This was taken from their article SCP-4205.

---

Demos that use Collapsibles

I'm not using those on this page anymore, since most seem to get messed up by my animated collapsible code.

---

Link back to my Sandbox page.