Just for fun, a starwars countdown example ANCC canvas

Report · Dec 19, 2019

It is a little complicated but I used a component label and I added images in the images folder for the background.

Code for that is:

$(animation_container).css( {
	 'background-image': 'url("images/mil.png"),url("images/sky.png")',
	 'background-size': 'cover'
});

then I made the text animation with this - to skew

$(dom_overlay_container).css({
	'background': '-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, transparent 100%)',
	'-webkit-transform-origin': '50% 100%',
	'-webkit-transform': 'perspective(340px) rotateX(25deg)',
	'background': '-ms-linear-gradient(top, rgba(0,0,0,0) 0%, transparent 100%)',
	'-ms-transform-origin': '50% 100%',
	'-ms-transform': 'perspective(340px) rotateX(25deg)',
	'background': '-moz-linear-gradient(top, rgba(0,0,0,0) 0%, transparent 100%)',
	'-moz-transform-origin': '50% 100%',
	'-moz-transform': 'perspective(340px) rotateX(25deg)'
});

https://documentcloud.adobe.com/link/track?uri=urn%3Aaaid%3Ascds%3AUS%3A080fbcdb-c4e6-412c-bfc1-1fad...