DEV Community

Angel Young
Angel Young

Posted on

3

I Did My First #CodePenChallenge

While I am so sure the instructions wanted me to do it with mostly JavaScript, I opted to use CSS animation and the Document Object Model (DOM). This is because I feel I haven't been practicing enough CSS animations as I want and haven't used the DOM to activate CSS animation.

As shown below, I want the animation to zoom out towards you. I used keyframes for this. Within the keyframes, I had the font-size go from 0px at 0% to 120px at 75% back down to 0px at 0%.

For the DOM, I used this code:

document.getElementById("hello-world").style.animation =
"fontzoom 20s infinite";

This is just a way for me to implement JavaScript in the project. In CSS, I was taught to activate the animation below the keyframes like this (this might be wrong as I am still learning):

#hello-world { animation: fontzoom 20s infinite }

As you can see, it's essentially the same thing except you have to use dot notation rather than calling it like you would in CSS.

From a design standpoint, I decided to use the colors green and aqua to represent water and grass since I have been feeling particularly shut-in during the pandemic. The font is Merienda from Google Fonts. I wasn't going to use a script font but decided at the end since it looks nicer. I added a text-shadow of a different shade of blue...which is blue. Finally, media queries have been added for responsiveness at max-width of 750px and 500px.

If you have any questions, let me know in the comments below.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up