Fun with Text Animations
Blog Home

Fun with Text Animations

June 23, 2019 |  Categories:  Development  

In today's development news, we're working with adding text animations to the home page. As I see it now, I'd like for the user to enter my site through a home page that features only my navbar and the stunning backdrop of Mt. Elbert in all its snowy glory. Then, after a second or two, the welcome messages will fade in over the background. I'd think I'd like to give the user the additional option of a button to hide the welcome text if they'd just like to look at the background image for a moment. This extra feature would just be icing on the cake to me though, as I'm not sure how difficult it might be to implement. It would likely involve some Javascript, in which I still have little experience. There may be a Bootstrap component for this as well; I'll have to investigate! Implementing the first part of this vision was pretty fun and easy. Having never worked with animations in CSS before, I was pleasantly surprised by how straightforward the process was. I simply designated the welcome messages with a custom class, and specified the animation properties in my custom CSS file. To make things easy, I simply named the animation 'fade in.' From there, I just had to define the @keyframes for the animation name. As it was just a basic fade animation, the definition was as simple as: @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } I decided to stagger the animations a little bit as well in the hopes of introducing text at the approximate reading speed of the user. I'm pretty happy with the timings now, but might ask my friends for some feedback. I'm also still deciding whether or not I should change the text color / font size for my welcome message. At the moment, the text is a bold white with a subtle black outline, and is fairly distinguishable from the background image. Considering that much of the picture is brilliantly white with snow however, I darker color may be more suitable. I think it looks fine as it is, but this is another area where outside input may be useful. At any rate, progress continues! I don't know if I'll be able to fully flesh out the "About Me" section by the end of the day, but I'll at least try to write an outline to ensure that I communicate the key messages I'd like to share. It's a very calm and quiet Sunday here in Pocatello, but I suppose they all are in this sleepy mountain town. Until next time, -Joe

Leave a comment:

Comments:

Hello!

I'm Joe Pickert, and welcome to my blog.

Here, you can find a collection of my thoughts both tech-related and otherwise.

If you find something that interests you, please leave a comment! I'd love to hear your thoughts and feedback!