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.
See the DEMO with "1st April 2020 only" settings
See the DEMO with visitorsCookie settings
This package is made without dependencies for you to easily include and initialize it in your project.
Get running in three easy steps.
npm install --save movethatbus.js
The script needs to be imported/included/required in your project before it can be initialized.
import moveThatBus from 'movethatbus.js'Append the file in a script tag just before the </body> tag, like:
<script src="lib/movethatbus.js"></script>Run the method init when/after DOM is mounted
moveThatBus.init();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.
And their default values:
{
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
}moveThatBus.init({ visitorsCookie: 'youShouldMoveThatBus' });
// or
moveThatBus.init({ startDate: "04/01/2020", endDate: "04/02/2020" }); // For april fools onlyTo 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
In repo root, run either npm run watch and then npx serve (and browse to localhost:5000/demo.html)
(it is like MIT)
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.
- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent