search

icelam / random-name-picker

Simple HTML5 random name picker for picking lucky draw winner using Web Animations and AudioContext API.
https://pinkylam.me/playground/random-name-picker
MIT License
115 stars 137 forks source link

Is there a way to customize the speed of animation? #4

Open dsron2 opened 1 year ago

dsron2 commented 1 year ago

Environment

What is expected?

What is actually happening?

dsron2 commented 1 year ago

Hi, i am not a programmer but this name selector is nice. Well done ! i am curious as to why most name selectors select the name so quickly . Is there a way to extend the time it takes for the name to be selected to enhance the dramatics and possibly have an extended slow down period as the final name is revealed?

icelam commented 1 year ago

Hi @dsron2, glad you like my work. The animation length is currently not open as an option for user to customize in the setting panel of the website. However it can be easily changed in the code level.

The following number can control how many items to be display in the reel: https://github.com/icelam/random-name-picker/blob/8419049a119cf0a27690f0157a6576979a9b3527/src/assets/js/app.ts#L45

Where duration of the animation can be configured here: https://github.com/icelam/random-name-picker/blob/8419049a119cf0a27690f0157a6576979a9b3527/src/assets/js/Slot.ts#L84

It is currently default to 40 items * 100 millseconds = 4000ms (4 seconds).

I might consider extending this as an option in the app when I am free, however if you need this in a short period of time, you may downloading my code and modify it.

dsron2 commented 1 year ago

Thank you for the reply! It definitely is one of the nicer designs i have seen.

Much appreciated!

On Feb 3, 2023, at 2:55 AM, Ice Lam @.***> wrote:

 Hi @dsron2, glad you like my work. The animation length is currently not open as an option for user to customize in the setting panel of the website. However it can be easily changed in the code level.

The following number can control how many items to be display in the reel: https://github.com/icelam/random-name-picker/blob/8419049a119cf0a27690f0157a6576979a9b3527/src/assets/js/app.ts#L45

Where duration of the animation can be configured here: https://github.com/icelam/random-name-picker/blob/8419049a119cf0a27690f0157a6576979a9b3527/src/assets/js/Slot.ts#L84

It is currently default to 40 items * 100 millseconds = 4000ms (4 seconds).

I might consider extending this as an option in the app when I am free, however if you need this in a short period of time, you may downloading my code and modify it.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

zinminoogit commented 1 year ago

background color want to change #337AFF