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.
Top comments (0)