demo)
substituteteacher.js (substituteteacher.js
will rotate through a series of sentences, transitioning between each one.
Quick Start
substituteteacher.js
is easy to use. Add the script to your page, provide a target container and call run()
.
Step 0: Install
Download the latest release or install from npm:
npm install substitute-teacher --save-dev
substituteteacher.min.js
file
Step 1: Add the <script src="substituteteacher.min.js"></script>
Step 2: Create your container element
<div id="sub">Fallback Text</div>
Step 3: Init substituteteacher.js
var sub = new Sub([
"A daring JavaScript library for subsitute teachers",
"A hilarious JavaScript library for awesome taglines",
"A svelte JavaScript library for sweet taglines",
"A super fun and wholesome JavaScript library for sliding fun",
"A JavaScript library for word substitution"
]).run();
API
Sub(sentences, [options])
The Sub
constructor create a new instance of sub. The sentences
parameter should be a list of sentence strings. Customize the instance by passing the options
parameter. The example below uses all options and their defaults:
var opts = {
containerId: "sub",
namespace: "sub",
interval: 5000,
speed: 200,
mobileWidth: null,
verbose: false,
random: false,
best: true,
clearOriginalContent: true,
};
var sub = new Sub([
"A daring JavaScript library for subsitute teachers",
"A hilarious JavaScript library for awesome taglines",
"A svelte JavaScript library for sweet taglines",
"A badass JavaScript library for sliding fun",
"A JavaScript library for word substitution"
], opts).run();
Options
Option | Description | Defualt |
---|---|---|
containerId |
Id of the injection point for HTML | "sub" |
namespace |
Namespace to prepend to classes used internally | "sub" |
interval |
Number of milliseconds between each change | 5000 |
speed |
Number of milliseconds that each step of the animation should take | 200 |
mobileWidth |
If defined, the minimum screen size at which to enable the library | null |
verbose |
True to enable console logging | false |
random |
True if the first sentence to appear should be random | false |
best |
True if the sentences should be ordered to minimize the number of changes performed | true |
clearOriginalContent |
True to empty out container and fade in the substitute teacher, false to seemlessly transition from the original content to the first item. This only works if random is false |
true |
run()
Starts the rotation between sentences, and attaches resize handlers (for disabling the library on small screens if mobileWidth
is defined).
stop()
Stops the rotation between sentences, and remove resize handlers.