Movethatbus.js NPM

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

yarn install movethatbus.js

Usage

How to include

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

If you use ES6

import moveThatBus from 'movethatbus.js'

If you don’t use ES6/don’t know

Append the file in a script tag just before the </body> tag, like:

<script src="lib/movethatbus.js"></script>

How to initialize

If you use ES6

Run the method init when/after DOM is mounted

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:

<body data-movethatbus>

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.

How to use Settings

{
  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

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:

<body data-movethatbus="{ 'visitorsCookie': 'youShouldMoveThatBus' }">
<!-- or -->
<main data-movethatbus="{ 'startDate': '04/01/2020', 'endDate': '04/02/2020' }"><!-- For april fools only -->

See the DEMO with visitorsCookie settings

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

Development

In repo root, run either npm run watch, yarn watch or npx serve (and browse to localhost:5000/demo.html)

License

ISC License

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.