How to code something like the Background of Code Radio. 24/7

Hi coders,

I am new to the forum and to programming, but was listening for a long time to that radio.
My questions is, ho to code something like the background animation of code radio? The one with Saron tipping and so on? What is needes and how to make a animation like this.

Thanks, I am looking forward to the answers and to try it out, somehow :wink:

Rakete

Hello @Rakete, welcome to the freeCodeCamp forums!

After reading your question I was curious also and looked into the site, and opened up the source code.

While looking into the site via the chrome-devtools, I noticed 2 images being loaded.
the bg.jpg and an animated gif.

I assume the code on the page loads up these two assets in their respective spots, and lets them render/run by the browser.
Looking at the client-side code confirms this setup.
Here’s the css for the page that handles the background and the gif placement:

Now I’m not sure how they originally created the gif, that can be answered by someone else :slight_smile:

2 Likes

Thanks for the very fast answer. Its inetesting how you found that out. You found the source code on github. And I will try the google dev tools. Thanks.
How the make a gif like that.

there you go in image editing field, there are specific softwares that will let you create gif images, which work similar to video editing, but I was playing with this 10 years ago, whatever I can suggest is outdated, but it was something in the adobe suite

1 Like

I remember I once created gif’s and animated cursors using gimp. I’m not sure if this would work for this, or be the best tool for the job, but it is something. I’m not an animated either, or artistic so I can’t help ya there tho ;D

It’s also worth mentioning that animations like that can be costly as gif pictures are not the most performant, which is why only the “cutout” of the person is animated rather than the entire picture.

1 Like