Skip to main content
avid_body16B8
Legend
December 19, 2019
Question

Just for fun, a starwars countdown example ANCC canvas

  • December 19, 2019
  • 0 replies
  • 357 views

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-1fad29769acc 

This topic has been closed for replies.