Hey, everyone. I’ve been busy trying to get my design completed on my about page and wanted some constructive feedback on this specific layout/idea regarding the webfonts-in-use.
I designed a simple “webfonts-in-use” colophon to showcase what webfonts I’m using across the site. I wanted to spice it up a tad by making it actually do something without it just sitting on the page, which is kind of boring.
I figured I could make the letters fade in and out with jQuery while switching to the next set of characters so one could see the letterforms.
Thoughts? Additional or other ideas?
Note: The animation will only work on the page when you hover inside the borders. Otherwise it’s a distraction. Also, the characters will cycle all the way through “Aa” to “Zz” and not just “Aa” to “Cc” as shown in the image above
@thedoc Appreciate the feedback, thank you!
Can you elaborate on what you mean by not liking the fading part? Should I have them cycle without a fade? Also, I’m not sure if I explained this well. The cycling will only happen when the mouse is hovered inside the perimeter. I think if I were to have it cycling in general, it would be a distraction to the user when reading the rest of the content on my about page.
That’s true, it doesn’t. I’m going to give a few people access when I feel it’s complete for last minute feedback, error-spotting, typos, etc., if you’re interested?
I was also thinking about showing specific features of the webfont. Such as showing ligatures and whatnot instead of just cycling through the alphabet.
So, sorry it took me this long to get back with the finished product, I had a lot of work come up these past two weeks.
I got it working with just HTML and CSS Animations, but I wasn’t able to get it to work like I wanted do it originally. The way I wanted to do it was to have one element with before and after psuedo element with the text in them, and to change the text and text style with a keyframe, but unfortunately that’s not possible with keyframes. So I wound up setting up 26 elements to place the content in.
Here’s the finished product at CodePen
If you’re already calling jQuery then using it would be a LOT less markup. All in all, it was just a fun side project for me. If things had worked out as I wanted initially then it would have been really light but seeing as how they didn’t… lol
Good luck with your project. :)
You must be logged in to reply to this topic.