movethatbus.js
v1.0.2
Published
Extreme Prank Makeover for your website on April Fools
Downloads
31
Readme
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 with "1st April 2020 only" settings
See the DEMO with visitorsCookie settings
Install
npm install --save movethatbus.jsor
yarn install movethatbus.jsUsage
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>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 onlyIf 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
Copyright (c) 2020 [email protected]
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.
Thanks to
- Bus image source: timeless.ee
- Like a bus credit: Like a Boss by Lonely Island
- Engine sound (that was cut and converted) source: 1histori
- Move that bus sound source: Extreme Home Makeover
- Divine inspiration: Extreme Home Makeover