Here we are reaching the 25th, the quarter round, the ¼th [I’m out of words to describe this day] Let’s just get straight to the point. Honestly, I haven’t been feeling myself lately. Another word could be sad. So during this funk, I couldn’t really create anything. While in this state, I kept listening to motivational speeches to sorta kinda get me out of this mindset. Hence this project. Basically, it’s a choice where you chose how you want to spend the day. As always I started with the design. I wasn’t aiming for much. Just something simple and just something…
So I know how I want it to look like. So now I moved on to the coding part. Since it was a very simple design, it didn’t really take much. Just some google fonts, proper positioning, and of course that dreaded mobile-first approach.
So all is well. It’s responsive. it has the effects I want. I then added the fact that I wanted to be changed based on the feeling of the day happy/sad
so okay. I can stop here and have it working. But you know what I can still do a better job. After all, all this practice shouldn’t go to waste. I’ve always wanted to work with animation because my skills are a bit lacking in that genre. I was a bit proud of myself really because I kinda tested the blinking on my own with no reference [so Athoug have a moment of pride regardless of how silly and simple it is it’s an achievement] I was experimenting the blinking and here’s the process
[The first approach]
[the second approach]
[The third approach]
Now the kicker is that animations in CSS only runs once. However, I want it to run every let say 4 seconds. After some digging, I realized there’s an event called animation end that fires up once the animation is ended. Thanks to this StackOverflow post, I managed to have it blink the way I want it to. Now This is what I have thus far
Not bad. Now I want to have the mouth flip whenever the user clicks on a choice. So after some messing around with rotation and transitions. I kinda like the final result.
You can check the actual project on my site here. Thank you for sticking with me thus far. Sorry for the sappy post. Better posts/projects will come soon.
https://athougcodesatnight.com/wp-content/uploads/9-6.gif301480athoughttps://athougcodesatnight.com/wp-content/uploads/Athoug-Codes-at-night_text-300x138.pngathoug2017-12-23 05:20:542017-12-30 10:03:30Happy/Sad Day 25