Stats Preview Card - SCSS, Grid, CSS Animations
Design comparison
Solution retrospective
What was originally a break from a larger project turned into a fun animation experiment! I spent an ungodly amount of time messing around with cubic-bezier curves. 😅 Hopefully they don’t mess up the screenshot.🤞 (Edit: Yep, they did. But only a little! 😁) The statistics are only animated on the desktop layout, as I felt it was a bit too much on mobile.
First time implementing prefers-reduced-motion to prevent animations for those who prefer it reduced. It seems to work when I test it, but please let me know if there’s any goofiness.
Also first time using mix-blend-mode, which seemed to work well in combo with opacity to get close (I hope) to the header image design.
Shoutout to @ApplePieGiraffe for inspiring me to play around more with animations.
As always, any and all feedback is greatly appreciated!
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hey, Anna! 👋
Amazing job on this challenge! 👏 I really like the text-fill-color-effect-thingy (😅) in the heading and those staggered fade-in animations on the statistics! 😉 Everything else is point (as expected)! 🙌 (And thanks for the shoutout, BTW. 😊)
Keep coding (and happy coding, too)! 😁
1@brasspetalsPosted over 3 years ago@ApplePieGiraffe Thanks - and credit where credit is due! Your "Autumn is Here" animations were so fun and ~smooth~, I knew I had to try my hand at some of them. 😄 Using the "-nth child" selector for the staggered animations was really useful, as in previous projects I'd only used a JS loop.
1@ApplePieGiraffePosted over 3 years ago@brasspetals
Oh, that's cool (I didn't know you saw that)! 😊 And credit where credit is due: I didn't actually come up with that design and interaction themselves—I saw a preview of a powerpoint presentation template that I liked and decided to steal it and create it with HTML and CSS instead. 😎 (But it was a fun little exercise.) 😅 And yeah,
nth-childis pretty awesome (especially since you can get pretty crazy with the combinations of items that you can select with it)!1 - @grace-snowPosted over 3 years ago
This looks really good, well done 👏
1@grace-snowPosted over 3 years agoI don't think you need the paragraphs inside the lis by the way, but they're doing no harm so I wouldn't change them ☺
1@brasspetalsPosted over 3 years ago@grace-snow Thank you very much! 😊 I was actually unsure if I should even use an unordered list in this case, or just go for plain, old divs instead. I think I kept the paragraph tags because I hadn't originally used a ul.
For the lis, since the styling is different for the number and label, what would be best to use here?
Thanks for bringing this up as I'd totally forgotten about it once I started working on the animations.
0@grace-snowPosted over 3 years ago@brasspetals I would use an unordered list with spans inside (one span wrapping either the number or word) , or 3 paragraphs with a span in the same way. The number and word are designed to be read together so it makes sense to keep them in the same meaningful element I think
1@brasspetalsPosted over 3 years ago@grace-snow You're absolutely right that the number and word should be in the same element. Removing the paragraph tags, applying the number styles to the li, and wrapping the word in a span sounds like way to go. Probably save me some lines of code too! 👍
Thanks again, Grace! I love getting into the "nitty gritty" or "nitpicky" (no negative connotation meant) stuff like this. The devil is always in the details. 😄
0@grace-snowPosted over 3 years ago@brasspetals exactly ☺
Tiny details are what drive standards up and really make you stand out to employers
0 - @RayaneBengaouiPosted over 3 years ago
Hello Anna,
Your solution looks so great ! 🙂
I really like the effect on the
<span>!I didn't know about
prefers-reduced-motion, thank you for sharing this ! 😃1@brasspetalsPosted over 3 years ago@RayaneBengaoui Thank you for the kind feedback, and you're welcome - happy to share my learning! 😊
1 - @nirtamir2Posted over 3 years ago
Awsome! Nice use of the
pictureelement for andsrcsetattribute. I like that you use opacity +mix-blend-mode: multiply;on the image and color the picture container for the image coloring. It looks great and the animations are great!1@brasspetalsPosted over 3 years ago@nirtamir2 Thank you so much for the kind feedback. 😊 I wish I had known about picture elements when I first started coding - they're so useful!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord