Slaptrash

(THIS IS A DRAFT.)

Make webzines that hearken back to Flash and YTMND, but with the ease of the short-lived Byte app, with some inspiration from Snapchat 'stories', 1080plus, online zines like Whimsy.Space, and mixtapes like SmashTV.

Work on your Slaptrash here:

Dimensions: px × px  

(Some samples: #1, #2, #3.)

HTML Embed

(Copy and paste this onto your site.)

Let's heal ourselves with some life-giving Slaptrash.

Reference

Use certain HTML tags, one per line, just as described below. This creates a stack of elements in each frame.

Frames (hr)

Frames are separated by <hr> tags, which act as frame breaks. A plain <hr> ends the current frame and waits for a click from the viewer.

<hr time=":08" pop="1">

An <hr> tag can also have a time setting, which sets a timer (in the above example, the timer is set for eight seconds) that will move the viewer to the next frame automatically.

The pop setting will remove elements from the frame when the viewer advances. In the example, the top element gets removed from the frame. You can also use pop="all" to clear the entire frame. Or use a negative number to remove elements from the bottom of the stack. (Like: pop="-2" removes the two bottom elements.)

Text (p, h1-h6)

To add normal-sized text, use the <p> tag. This text can have colors and effects applied. This text will be centered vertically and automatically read by the browser's text-to-speech in its default tone of voice.

<p color="yellow red">I am a foreigner to zines such as these.</p>

You can also add header tags (<h1> through <h6>), which decrease in size, and which are centered vertically and horizontally. The TTS will also read these at faster rates, the smaller they are.

<h1 mute="true">The Aleph Is Shrinking</h1>

The mute="true" can be used to turn off the TTS for some text.

Solids

A solid frame of color is created with the <solid> tag.

<solid color="black"></solid>

Images (pic)

Use a <pic> tag with the image's URL within.

<pic effect="spin">https://media.tenor.com/images/.../tenor.gif</pic>

Videos (vid)

Just a <vid> tag with the video's URL within. YouTube and Twitch URLs are presently supported. (Even live streams can be used.)

<vid start="3:14">https://www.youtube.com/watch?v=_aKuVAtYgv4</vid>

The start setting indicates at what timestamp to start playing the video.

The mute="true" can be used here to turn the audio off.

Audio (sound)

The <sound> tag will play an audio file or the soundtrack for a video.

<sound>https://www.youtube.com/watch?v=_aKuVAtYgv4</sound>

In this case, the video itself will not be shown.

Cards

The <card> tag will show a compact version of any web page, Reddit or Twitter post. (They will not be clickable, however, at this time.)

<card>https://reddit.com/r/arduino</card>

Tiles

The <tile> tag will let you break the frame up into a grid. For example, let's setup an invisible grid that's four equal squares across and three squares down.

<tile>4x3</tile>

This won't create any visible tiles on the screen. What it will do is place the next twelve (4 times 3) elements on the screen in a grid formation. It will go row-by-row, starting in the top-left corner, placing elements across each row, moving down until it reaches the bottom-right corner. Then it will return to placing elements so that they fill the screen.

<tile start="5">4x3</tile>

This grid will start placing elements in the second row (square 5 would be the first square on the second row).

You can end a tiled grid by placing a frame break (<hr>) or by using <tile>1x1</tile>.