Webfont Colophon – feedback
# April 10, 2013 at 4:23 pm
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# April 10, 2013 at 7:19 pm
@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.# April 10, 2013 at 8:03 pm
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.# April 23, 2013 at 8:50 pm
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
-Elijah# April 24, 2013 at 12:03 pm
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.