I needed a HTML template for demo purposes and I browsed the forum for clues on how to make one. I found alot of outdated information but I hope that this template is up-to-date for the current 2.1 version of CasparCG.
I've used parts of code/ideas found here on the forum. The idea for the lower third was copied from a videohive After Effects template because I needed something to follow when fighting the css to behave as I wanted :) The code has comments so you should be able to follow what is happening.
When playing a HTML template in CasparCG the update function is called before play so just take that into consideration when making templates. I had problems with using css @font-face because there is a delay between using the font and when I can measure the width of the text. I now use a 40ms delay so if you have a better solution I would like to hear about it.
Youtube video of template in usehttps://youtu.be/QBE2Lt35WQM
Template can be found herehttps://www.digiactive.net/cgclient/html_template.zip
UPDATE 02.03.2017 15:48 GMT+2:
-Template is using Greensock JS for animation https://greensock.com/
-The font is from Google Fonts https://fonts.google.com/specimen/Poppins
-The template can be called without any parameters (displays example content).
-The template can be loaded into Chrome for debugging (uncomment debug section in code) + you must use update before play. When using stop the webpage must be reloaded to use again.
-The template is controlled as a flash template no CALL calls are needed (unless you need to call your own custom function CALL 1-10 "CustomFunction('hello!')" ).