HTML lower third template for learning

#1
Hi,

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 use
https://youtu.be/QBE2Lt35WQM

Template can be found here
https://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!')" ).

Who is online

Users browsing this forum: No registered users and 1 guest

cron