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
I think it’s a neat idea, really cool to be informed as you’re reading. I’m not sure I like the fading part of it, but I guess that might change if I could actually see it in practice (not just a gif).
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.
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.
Nice work @ElijahFowler. I think I’m going to stick to jQuery to keep the markup minimal. I also might not be showcasing all 52 glyphs. Instead, I might focus on the appearance features (ligatures, italics, etc).
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