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 CSS Transitions and Transforms Getting Started with CSS Transforms Skewing Content

Frontenddisegner.com background?

Hi,

Does somebody know how the animated background on the frontenddisegner.com website is accomplished?

Steven Parker
Steven Parker
229,745 Points

Are you sure you entered that URL correctly?

Try cut-and-paste from your browser address bar.

3 Answers

Steven Parker
Steven Parker
229,745 Points

I'm guessing you meant to write frontenddesignconference.com, the link given in the Resources section for the video you linked to.

The background itself is just a colorful image, but the moving shapes are animated by a rather complex bit of JavaScript that is drawing on a <canvas> element that overlays the background.

This is where familiarity with the Chrome Dev Tools can really come in handy.

:sparkles:

Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

I assumed frontenddesigner.com that has an animated flame. What are the odds, we both assume something different, but both have animations. :) Though, now I'm guessing he meant the one assumed. :thumbsup:

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points

Hey Martin,

The Flame animation is done with CSS. If you right click on the flame and "inspect element" you will be able to see the rules for the animation.

:dizzy:

Hey thanks and sorry for the miscommunication. I was referring myself to the background Steven talked about, thanks for the help !

Martin