search

topshef / animatedbuttons

1 stars 2 forks source link

update animation to show on black background [hbar 2000] #13

Open topshef opened 3 years ago

topshef commented 3 years ago

Context:

The following amimated button has a nice sparkly animation when you click it: https://kpay.live/1clicktip/demo_animated_button/?amount=0.3&unit=hbar&recipientId=0.0.26938

But when presented on a black background, the animation hardly shows, eg: https://kpay.live/1clicktip/demo_video/?amount=0.1&unit=hbar&recipientId=0.0.28224&vid=GzmS4p3jXvs

Task: to update the colours etc (coin3.css, coin3.js ?) so that the animation shows up well on a black background

topshef commented 3 years ago

Demo in public repo:

white background: live: https://kpay.live/scratchpad/animatedbuttons/mediumclap/coin3.html repo: https://github.com/topshef/animatedbuttons/blob/master/mediumclap/coin3.html

black background: live: https://kpay.live/scratchpad/animatedbuttons/mediumclap/blackbackground/coin3.html repo: https://github.com/topshef/animatedbuttons/blob/master/mediumclap/blackbackground/coin3.html

rashadatjou commented 3 years ago

I would like to solve this if it's still active ?

topshef commented 3 years ago

@Denpex thank you, yes please I have assigned you :-)

rashadatjou commented 3 years ago

@topshef awesome :D

topshef commented 3 years ago

@Denpex thanks so much for PR https://github.com/topshef/animatedbuttons/pull/14 The parameterization is cool, here is an example with red and blue: https://kpay.live/scratchpad/animatedbuttons/mediumclap/blackbackground/coin3.html

:root { --background-color: black; --particle-color: red; --main-color: #0000ff;

--particle-opacity: 1; } image

A follow-up might be to set the circle colour (currently white) as a parameter, and also to delay the colour fading so that colours remain bright for a short while.

topshef commented 3 years ago

@Denpex do you have a Hedera account for tips, or can you open one? See #5

rashadatjou commented 3 years ago

@topshef I will create another pull request and separate the circle and any other color into their own variable. I don't have a Hedera account but will create one and send it to you, thanks beforehand for the tip!

rashadatjou commented 3 years ago

@topshef I am participating in this years hacktoberfest and I would really appreciate it if you would add the topic hacktoberfest & hacktoberfest-accept to this issue. I am going to create another pull request later today to separate all the colors into their own variables.

topshef commented 3 years ago

@Denpex sure yes i'll try to do that now, i believe that's at the repo level. Thanks for your help :-) [edit: hacktoberfest & hacktoberfest-accepted topics now added]

JonathanDn commented 3 years ago

Great stuff good job @Denpex ! :)

topshef commented 3 years ago

@Denpex thanks again, we note we haven't tipped you yet... let me know when you have a Hedera account and we'll send it over. You can open an account directly within the following app, no KYC required: https://ivy.world

There are other options if you're crypto-savvy: https://help.hedera.com/hc/en-us/categories/360000099958-HBAR-Wallets