Jaxel
Member
So I previously wrote a tutorial on how to do animations in html/js/css for your streams:
https://obsproject.com/forum/resources/animating-streams-with-scoreboard-assistant.373/
Now I am working on something new.
That old tutorial I wrote used images to display the backgrounds of your elements. This was problematic because if you wanted to change the colors of your backgrounds, you had to open up photoshop and put in the work... This new version is built completely in CSS3, so you dont need to load any images. Just change some variables in CSS and the colors change:
I tried to do as much as possible in CSS3, instead of images and javascript. All the animations are in CSS3 as well. The only things done in javascript are the XML file reading (from Scoreboard Assistant) and the queues for the animation timing.
This currently works GREAT in OBS, does not work at all in XSplit (Xsplit's browser is chrome 47, needs to be updated to at least chrome 49)
https://obsproject.com/forum/resources/animating-streams-with-scoreboard-assistant.373/
Now I am working on something new.
That old tutorial I wrote used images to display the backgrounds of your elements. This was problematic because if you wanted to change the colors of your backgrounds, you had to open up photoshop and put in the work... This new version is built completely in CSS3, so you dont need to load any images. Just change some variables in CSS and the colors change:
Code:
:root {
--main-color0: rgba(000,000,000,0.3);
--main-color1: rgba(255,000,000,0.7);
--main-color2: rgba(000,255,255,0.7);
--main-color3: rgba(255,255,255,0.7);
}I tried to do as much as possible in CSS3, instead of images and javascript. All the animations are in CSS3 as well. The only things done in javascript are the XML file reading (from Scoreboard Assistant) and the queues for the animation timing.
This currently works GREAT in OBS, does not work at all in XSplit (Xsplit's browser is chrome 47, needs to be updated to at least chrome 49)