Super cool project from Bennett Feely! It makes any web type into 3D lettering with a mouseover effect that moves the 3D objects in space. It’s reminiscent of Zdog, but for type. It works its magic by stacking a bunch of copies of the glyphs on top of each other that are offset by some translateZ, then using some perspective and rotateX/rotateY on a parent element to do the interactive stuff.
The effect is extremely fun. I can’t believe Fisher-Price hasn’t already implemented it site-wide.
Accessibility-wise, I have some questions. Even in the <h1> on the website, it turns into eight <h1> elements, which I can’t image is super great for screen readers, not to mention the slew of <span> elements inside. I’d think you could mitigate some of the problem with a single parent wrapper using an aria-label, yes?
Copy and paste also has weird results. If I copy, like, straight across a word, I tend to get just what I want. But if I copy from before the word to after it, I’ll get all the extra copies, which I definitely do not want. Maybe that’s fixable with some user-select: none; dancing.
It’s not just type, either! Bennet’s example on an <img> is neat in how it makes like printing a photo on (real world) canvas and stretching it around the frame so that even the edges have color.
My favorite is how it looks on <svg> though. So cool.
Direct Link to Article — Permalink
The post ztext.js appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
source https://bennettfeely.com/ztext/
No comments:
Post a Comment