Author: | josex2r |
---|---|
Views Total: | 2,702 views |
Official Page: | Go to website |
Last Update: | November 28, 2022 |
License: | MIT |
Preview:

Description:
Slotmachine.js is a tiny, dependency-free JavaScript library for creating Slot Machine-like shuffle animations without any 3rd-party dependencies.
With this library, you can animate an element from one position to another in a random circular way as if it was being shuffled by a machine.
How to use it:
1. Download and import the Slotmachine.js library.
<link rel="stylesheet" href="dist/slotmachine.css" /> <script src="dist/slotmachine.min.js"></script>
2. Add a group of elements to the slot machine.
<div id="mySlotMachine"> <div>Slot 1</div> <div>Slot 2</div> <div>Slot 3</div> <div>Slot 4</div> <div>Slot 5</div> </div>
3. Initialize the slot machine.
const el = document.querySelector('#mySlotMachine'); const machine = new SlotMachine(el, { // options here });
4. Start the slot machine animation.
machine.shuffle();
5. Available options.
const machine = new SlotMachine(el, { // initial element // 0 = element 1 active: 0, // duration in ms delay: 200, // custom function to randomize the result randomize: (_, max) => randomInteger(0, max), // up or down direction: 'up', });
6. API methods.
// start the animation machine.shuffle(); machine.shuffle(5); machine.shuffle(Infinity); // stop the animation after 3 spins machine.stop(3); // spin to the next element machine.next(); // spin to the previous element machine.prev();
7. Properties.
// get the next active element machine.nextActive // get the next element machine.nextIndex // get the previous element index machine.prevIndex // check if the slot machine is running. machine.running // check if the slot machine is stopping machine.stopping // get the current active element machine.active