Earth Day Frontend Challenge: Our Little Blue Dot 🌎

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

For me, this is a whole new realm of front end development. Working as a full-stack dev I rarely have the need to utilize any type of complex CSS animations. I have been looking for new opportunities to sharpen my CSS skillset and this was the perfect opportunity. In the past year, I learned the basics of SCSS via bootstrap extension and customization. This challenge provided me the opportunity to work with more complex concepts such as SCSS functions and dynamic SCSS variable creation. It also helped enhance my understanding of the syntax and solidify my knowledge of more complex CSS animation. Looking at some of the other amazing entries I know I still have much to learn, but overall I feel like I have made great strides on my journey and I have a blast putting this all together.

Demo

Journey

Overall this was a labour of Love ❤️. The biggest challenge for me was fully developing my understanding of how CSS animations actually work; the different possible combinations of animation timing and direction and how assets can be mapped and manipulated in accordance with their size and animation requirements was interesting. Particularly utilizing element backgrounds to provide different perspectives to create the illusion of more than a 2D perspective.

One big new concept for me was using SCSS to dynamically apply style to an array of elements while also generating dynamic values like I did with the stars. This was important as it reduced so much of what I would have had to do if I had stuck with vanilla CSS. It was the implementation of the stars that led me to convert my CSS to SCSS given the sheer number of elements I wanted to have in the space.

Originally I had just started with a spinning earth, I wanted to somehow create the continents using CSS however this was one aspect I could not achieve. I ended up experimenting with mapping background images on the container, getting the repeat animation seamless was probably the biggest issue I faced in this regard. I ended up having to play with a range of px values for the final keyframe positions. Once this was done, I saw some of the other challenges posted and took inspiration from them @arndom clouds were very cool and I decided to attempt my own (single lonely cloud) . I found maintaining the shape of the cloud at larger scales was challenging, and utilized ::before ::after pseudo elements to get the shape I wanted. Playing with the border radii and box-shadows seems to have provided a solid cartoonish look which I think fits well with the rest of the design. I also saw some space backgrounds I thought were very cool like @jorgedelcampo and so I opted to also attempt to place my earth in a star filled sky. This is what led me to generating the dynamic falling stars. This was definitely the most difficult challenge. It took much research to properly develop the positioning, alignments, design and timing. And was ultimately the reason I opted for SCSS. The lack of JS was challenging as I wanted to also have the number of stars created be dynamic, however this was problematic given the fixed html elements so I was forced to use a fixed value for the star count. In a future project I would also likely opt for an html templating tool like pug or handlebars to reduce the markup I had to manually create (literally 50 star divs lol). I find that this hardcoding of the elements makes the html clunky and annoying to change.

One other issue I faced was maintaining responsiveness. I think my solution to some of the positioning could have been better, but I currently did not find a better method than a few select media queries for specific item positions. The clouds and star particularly were the issue. Their placement on smaller screens was an issue, the stars would show before their fall, and the cloud got too close to the earth. This is where I was forced to use the media queries. If anyone could suggest a better implementation I would love to hear it. Complex front end design is still somewhat new to me, so combining the different positioning styles may not have been the correct choice here, but it still accomplished what I intended.

Overall this was an awesome experience, and I took inspiration from many different sources. Looking at various tutorials and the MDN docs were critical to me getting my animations the way I wanted. Alas, my entry is not perfect, but it is 1000x better than I expected. And I am content with this.

Thank you checking it out and reading, Happy (belated) Earth Day 🌎🚀🖖 Live long and prosper