https://github.com/philnash/reveal-confetti
🎉 A RevealJS plugin that allows you to fire confetti cannons on your slides based on a data attribute
https://github.com/philnash/reveal-confetti
Last synced: 7 months ago
JSON representation
🎉 A RevealJS plugin that allows you to fire confetti cannons on your slides based on a data attribute
- Host: GitHub
- URL: https://github.com/philnash/reveal-confetti
- Owner: philnash
- License: mit
- Created: 2023-04-13T08:36:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-13T08:49:11.000Z (over 2 years ago)
- Last Synced: 2025-02-21T00:09:12.819Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 45.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎉 Reveal.js Confetti 🎉
This is a [RevealJS](https://revealjs.com/) plugin that allows you to fire confetti cannons on your slides based on a data attribute.
## Usage
Clone the repo:
```sh
git clone https://github.com/philnash/reveal-confetti.git
cd reveal-confetti
```
Install the dependencies
```sh
npm install
```
Build the code:
```sh
npm run build
```
In your RevealJS slides, create a directory called `./plugin/confetti`. Copy the file `dist/confetti.js` from this project into the `./plugin/confetti` directory.
In your RevealJS slides HTML, add this script to the page with the other plugins:
```html
```
Add `RevealConfetti` to the Reveal plugins array:
```js
Reveal.initialize({
plugins: [RevealConfetti],
});
```
Now, to add confetti to a page you can add `data-confetti` to the slide's `` element.
```html
My slide title
```
You can also made a smaller confetti burst with:
```html
My slide title
```
Or a long burst of confetti cannons from both sides of the page by adding `data-confetti-large` and a duration in seconds with `data-confetti-duration`:
```html
My slide title
```
### Advanced
You can change the colours of the confetti by adding the data attribute `data-confetti-colors` with a space delimited list of hex colours:
```html
My slide title
```
You can also change the number of particles fired with the data attribute `data-confetti-particle-count`.
```html
My slide title
```
Note: this does not work with the `data-confetti-large`.
## Thanks
This plugin uses [Canvas Confetti](https://github.com/catdad/canvas-confetti) under the hood and implements [some of the examples that you can see here](https://www.kirilv.com/canvas-confetti/).
## License
MIT License Copyright (c) 2023 Phil Nash