Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by lihaoquan
lihaoquan
12,045 Points

CSS Animation?

I looked at a site with some amazing animations and transformations, however, I have no idea how did they do it. Can someone explain to me how did they achieve this kind of result? Is it pure CSS animation or what? Link : http://beta.rallyinteractive.com/ Especially at the header part where the ribbon becomes the menu bar background.

2 Answers

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

I do not believe the ribbon is a CSS animation, it appears that was done using HTML5 Canvas and a lot of JavaScript. Although I can't find the source now I believe I also read at one point it took them a year to develop the beta site.

lihaoquan
lihaoquan
12,045 Points

wow? 1 year... and here I was wanting to imitate it. I guess it explains the complexity then.

Alexander Chernov
Alexander Chernov
6,596 Points
Alexander Chernov
Alexander Chernov
6,596 Points

Top box with 45deg angle created with transform rotateY, and mikes02 is right, this effect with line transformations created using canvas.