User avatar
Roken
Posts: 316
Joined: Sun Dec 31, 2017 4:35 pm
Location: UK

Colour cycling

Sat Jun 02, 2018 9:11 am

html and js are not really my forte. I've grabbed an HTML clock from https://github.com/carli2/raspberry-projects (kudos to the creator, BTW), which is working well on my Pi with a 5" touchscreen.

I know where it gets the colour from, but I'd like to cycle the colour (not a hard cut, but fade through). The html uses the refresh function, and so timing is implicit, but how do a colour fade through the spectrum?
Headless PI. OMG, someone cut it's head off. Oh, hang on. it didn't have one to start with.


User avatar
Roken
Posts: 316
Joined: Sun Dec 31, 2017 4:35 pm
Location: UK

Re: Colour cycling

Sat Jun 09, 2018 12:24 pm

Sorry it's taken a few days to come back. The links provided me a code snippet that allowed me to modify the clock, and now it colour cycles as desired.

Thank you.
Headless PI. OMG, someone cut it's head off. Oh, hang on. it didn't have one to start with.

RapidTransit22
Posts: 4
Joined: Fri Feb 14, 2020 2:30 am

Re: Colour cycling

Fri Feb 14, 2020 6:33 pm

I know I am a bit late, but I would like to submit a couple of contributions for anyone else that views this from.

From what I'm seeing is that the forum poster needs help with CSS, here are some tools to help with that.

https://css-tricks.com/almanac/properties/a/animation/ <-- Fade Animations For Clock (Copy and paste this css into your clock)
https://buttonanimations.github.io/ <-- open source css animations (Fade Animations Included), its open source so you can just copy and paste it and test it out

Hopefully whoever is reading is able to troubleshoot and fix their problem. Please PM me or reply to me if you have any more questions.

---

RapidTransit22
Frontend and Backend Web Dev | 2 Years Exp

Return to “General programming discussion”