SplashJS Documentation

Welcome to the SplashJS documentation! This is a work in progress, so please be patient as I work on it.

For now, you can check out the demo page here.

Also, check out the Bee Movie script demo here. (This is mostly a joke demo.)

For more information, check out the GitHub repo here.

How to Use SplashJS

Well, for starters, you're gonna need something to actually put the splash on.

(duh.)

Here's a preset example:

splashjs({
    // This is based off of the default preset, so everything here
    // is what you'll see normally.

    target: ".test-subject", // You need to set this yourself NO MATTER WHAT.
    splashes: [
        "Hello world!",
        "Made with SplashJS!",
        "SplashJS - Made by BestSpark687090",
        "Change me by setting the 'splashes'\noption in the initializer!",
    ],
    color: "#ffff55",
    font: "Arial", // Make sure you have the font loaded/installed!
    rotation: -45,
    border: "none",
    fontSize: "x-large",
    animation: {
        movement: [
            { transform: "scale(1) rotate(-45deg)" },
            { transform: "scale(1.25) rotate(-45deg)" },
            { transform: "scale(1) rotate(-45deg)" },
        ],
        timing: {
            duration: 3000,
            iterations: Infinity,
            fill: "forwards",
        },
    },
    moveInterval: 250,
})
    

Here's what that looks like as a demo:

Hello I am the test subject for this demo.

The text changes each time you refresh.

However... the text can and probably WILL overlap with other elements. (see demo)

What Each Option Does

target(s)

Uses a query selector to select the element you want.

To select multiple elements, use the targets option instead.

splashes

Sets the text that will be displayed.
You can set multiple strings, and it will randomly choose one each time you refresh.

color

Sets the color of the text. (hex, rgb, rgba, hsl, hsla, etc.)

Defaults to the Minecraft Gold color. Why? Why not!

font

Sets the font of the text. Make sure you have the font loaded/installed!

rotation

Sets the rotation of the text in whatever you want, but defaults to degrees.
To set a custom rotation specifier, make the rotation a string with the specified turn amount.

border

Sets the outline of the text. (uses text stroke, kinda like the border property... but not.)

fontSize

Sets the font size of the text. Uses whatever unit you specify.

animation

Sets the animation of the text. Uses an object with the movement and timing properties.
It's like animating an object in JS.
See the MDN docs for details.
As of right now, CSS animations are not supported. I'm trying my best to get that working though!

moveInterval

Sets how often the text will check for position updates. (in milliseconds)
To remove position updates, set the moveInterval to something other than a number.

How to load SplashJS

To load SplashJS, you can just use a script tag!

<script src="splash.js"></script>

<script src="https://cdn.jsdelivr.net/gh/BestSpark687090/splashjs/index.js"></script>

That's it! Now you can use SplashJS!

PS: sorry for not having this... better. I'm kinda lazy, so I just wrote it by hand.
I know that sounds worse, but i didn't want to figure out a doc system of some sort.