🚌 movethatbus.js

Extreme Prank Makeover for your website on April Fools

src="https://img.shields.io/badge/generated%20with-%40epranka%2Fcreate--package-blue" />

---

Ever wanted to reveal your website in style? Like that classy American show used to?

Movethatbus.js creates an overlaying canvas with a bus, when clicked, it "moves the bus" and plays some fitting sound.

Use for your next website reveal, as an april fools joke or just go crazy and use it on every visit!

You can restrict it to only trigger within a certain date range or for visitors that have a special cookie set.

Have fun, but maybe not too much fun.

This package is made without dependencies for you to easily include and initialize it in your project.

See the DEMO

See the DEMO with "1st April 2020 only" settings

See the DEMO with visitorsCookie settings

Install

``
npm install --save movethatbus.js
`

or

`
yarn install movethatbus.js
`

Usage

$3

The script needs to be imported/included/required in your project before it can be initialized.

#### If you use ES6
`js
import moveThatBus from 'movethatbus.js'
`

#### If you don’t use ES6/don’t know
Append the file in a script tag just before the tag, like:
`js

`

$3

#### If you use ES6
Run the method init when/after DOM is mounted
`js
moveThatBus.init();
`

#### If you don’t use ES6/don’t know
The script can be initialized by adding a simple data-movethatbus attribute to any HTML element.

Initialization example:
`html

`
See the DEMO

If you only want to prank certain visitors, init() with the setting visitorsCookie with whatever name you want for your cookie. Then make sure that the chosen visitors have that cookie set to true.

$3

`js
{
cdnUrl: 'https://raw.githubusercontent.com/knogobert/movethatbus.js/master/',
busSrc: "lib/img/bus.png",
soundSrcs: ["lib/sound/likeabus.mp3", "lib/sound/movethatbus.mp3", "lib/sound/engine.m4a"],
amountOfTimesToLetBusLoad: 1, // compares to clickedCookie
clickedCookie: 'howManyTimesDidYouMoveThatBus', // name of cookie
visitorsCookie: false, // set to false to prank every visitor, or use string as the name for the cookie
startDate: "", // MM/DD/YYYY = 04/01/2020. Set to first day that should trigger bus
endDate: "", // MM/DD/YYYY = 04/02/2020. Set to the day after the last day that should trigger bus
}
`

#### If you use ES6
`js
moveThatBus.init({ visitorsCookie: 'youShouldMoveThatBus' });
// or
moveThatBus.init({ startDate: "04/01/2020", endDate: "04/02/2020" }); // For april fools only
`

#### If you don’t use ES6/don’t know
To be able to parse the setting keys and strings, surround them with single-quotes when using as value for data-movethatbus.

Settings example:
`html