mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-18 18:29:42 +00:00
40 lines
2.7 KiB
Plaintext
40 lines
2.7 KiB
Plaintext
|
title: $:/plugins/tiddlywiki/confetti/readme
|
||
|
|
||
|
! Introduction
|
||
|
|
||
|
This plugin adds a programmable confetti cannon to your TiddlyWiki. It is based on https://www.kirilv.com/canvas-confetti/ by Kiril Vatev.
|
||
|
|
||
|
! Usage
|
||
|
|
||
|
The confetti cannon is controlled using messages.
|
||
|
|
||
|
!! Message: tm-confetti-launch
|
||
|
|
||
|
The `tm-confetti-launch` message launches the confetti cannon. The following options are supported:
|
||
|
|
||
|
|!Name |!Description |!Default |
|
||
|
|''particleCount'' |The number of confetti to launch |50 |
|
||
|
|''angle'' |The angle in which to launch the confetti, in degrees (90 is straight up) |90 |
|
||
|
|''spread'' |How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined `angle` plus or minus 22.5 degrees |45 |
|
||
|
|''startVelocity'' |How fast the confetti will start going, in pixels |45 |
|
||
|
|''decay'' |How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed |0.9 |
|
||
|
|''gravity'' |How quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc. |1 |
|
||
|
|''drift'' |How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right |0 |
|
||
|
|''ticks'' |How many times the confetti will move (this is an abstract quantity; the designed recommends playing with it if the confetti disappears too quickly for you) |200 |
|
||
|
|''originX'' |The `x` position on the page, with `0` being the left edge and `1` being the right edge |0.5 |
|
||
|
|''originY'' |The `y` position on the page, with `0` being the top edge and `1` being the bottom edge |0.5 |
|
||
|
|''colors'' |A space separated list of color strings in hex format (eg `#bada55` or `#ce5`) | |
|
||
|
|''shapes'' |A space separated list of shapes for the confetti. The possible values are `square`, `circle`, and `star`. The default is to use both squares and circles in an even mix. To use a single shape, you can provide just one shape in the list, such as `star`. You can also change the mix by providing a value such as `circle circle square` to use two third circles and one third squares | |
|
||
|
|''scalar'' |Scale factor for each confetti particle. Use decimals to make the confetti smaller |1 |
|
||
|
|''zIndex'' |Z-index of confetti. Increase the value if the confetti is appearing behind other on-screen elements|100 |
|
||
|
|''disableForReducedMotion'' |Set to `yes` to entirely disable confetti for users that [[prefer reduced motion|https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion]] |`no` |
|
||
|
|
||
|
<$button>
|
||
|
<$action-sendmessage $message="tm-confetti-launch"/>
|
||
|
Launch
|
||
|
</$button>
|
||
|
|
||
|
!! Message: tm-confetti-reset
|
||
|
|
||
|
The `tm-confetti-reset` message stops any active confetti.
|