Highlighted

Just for fun, a starwars countdown example ANCC canvas

Adobe Community Professional ,
Dec 19, 2019

Copy link to clipboard

Copied

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... 

TOPICS
How to

Views

212

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Just for fun, a starwars countdown example ANCC canvas

Adobe Community Professional ,
Dec 19, 2019

Copy link to clipboard

Copied

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... 

TOPICS
How to

Views

213

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 19, 2019 1

Have something to add?

Join the conversation