Super cool project von Bennett Feely! Es verwandelt jeden Webtext in 3D-Schriftzüge mit einem Mouseover-Effekt, der die 3D-Objekte im Raum bewegt. Es erinnert an Zdog, aber für Text. Es entfaltet seine Magie, indem es eine Reihe von Kopien der Glyphen übereinander stapelt, die um einen bestimmten translateZ versetzt sind, und dann etwas perspective und rotateX/rotateY auf einem Elternelement verwendet, um die interaktiven Dinge zu tun.
Der Effekt ist extrem spaßig. Ich kann nicht glauben, dass Fisher-Price es nicht schon seitenweit implementiert hat.
In Bezug auf Barrierefreiheit habe ich einige Fragen. Selbst in der <h1> auf der Website wird sie zu acht <h1>-Elementen, was ich mir nicht vorstellen kann, dass es für Screenreader super toll ist, ganz zu schweigen von der Flut von <span>-Elementen darin. Ich denke, man könnte einen Teil des Problems mit einem einzelnen Eltern-Wrapper beheben, der ein aria-label verwendet, oder?
Auch das Kopieren und Einfügen hat seltsame Ergebnisse. Wenn ich zum Beispiel direkt über ein Wort kopiere, bekomme ich normalerweise genau das, was ich will. Aber wenn ich von vor dem Wort bis nach dem Wort kopiere, bekomme ich all die zusätzlichen Kopien, die ich definitiv nicht will. Vielleicht ist das mit etwas user-select: none; Tanz behebbar.
Es ist nicht nur Text! Bennets Beispiel bei einem <img> ist raffiniert darin, wie es ein Foto auf (reale) Leinwand druckt und es um den Rahmen spannt, sodass selbst die Ränder Farbe haben.
Am besten gefällt mir jedoch, wie es auf <svg> aussieht. So cool.
Wow!!!
Wir können auch text-shaow verwenden, um dem Text einen 3D-Effekt zu verleihen.
Das scheint sehr von meiner 3D-Textbibliothek für Zdog inspiriert zu sein, die Zfont heißt (https://jaames.github.io/zfont/). Ich fühle mich ein bisschen verärgert darüber, lol