This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page
Mainly I am not a participant of this Challenge, just did it for fun. The Credit for initial effort goes to @arndom
Inspiration
When I saw the challenge I wanted to participate to improve my skills, and when I saw the GIF in the announcement post I knew what to attempt. I haven't done any "complex" animations with CSS alone, so this was the right time to try.
What I Built
Keeping in mind The above GIF, I created an animation of EARTH as in the GIF You can see the demo below
Demo
It's doesn't loop, so click rerun↗️ to replay
Journey
Upon reading the announcement and seeing the GIF, I got the idea of an animation like this. I had to attempt a CSS recreation. It was unique, outside my comfort zone, and something worth doing and sharing.
Working on it was both challenging and inspiring.
Happy coding :)
Top comments (9)
Hey! Very good entry!
If you want to improve it, maybe you could add a very slight 3D rotation to the eyes and mouth when they look in different directions... you could also animate a little the leafs of the tree, you could use
transform-originto choose the anchor point of each leaf and rotate them accordingly... also, some elements have a wobbly-like effect, you could useskewto do that.Hope this helps.
Please provide feedback on my performance, or kindly offer any suggestions for potential improvements. Your input is greatly valued and appreciated.
@bhallibhai
This is heavily influenced by the original here: dev.to/arndom/recreating-a-gif-wit...
There is no problem drawing inspiration, but using the same article title, copying the article content, and even the codepen without any form of attribution is wrong!
Already mentioned above I guess, That I Recreated, All the created goes to you, Man :)
I update this for fun, If you still have problem I can delete this post and send the updated code to you @arndom
I hardly got time to do stuff like this. I am a busy person, Usually Don't have enough time.
It's all good now 🤝
Glad to see the attribution 🤝.
Generally, it's alright to build on top of open-source but always give references, so as not to make the original author/creator feel cheated.
I think you overthought, But it's cool Man.
Yh it's all good, but it's not overthinking if 99% of your work is copied and phrased as someone's else, even if it is just for fun. It might not have been your intention but it's how it initially appeared.
Looking good and cool enough,
Some comments have been hidden by the post's author - find out more