ztext.js

Online Coding Courses for Kids

Projet super cool de Bennett Feely! Il transforme n’importe quel type Web en lettrage 3D avec un effet de survol de la souris qui déplace les objets 3D dans l’espace. Cela rappelle Zdog, mais pour le type. Il opère sa magie en empilant un tas de copies des glyphes les uns sur les autres qui sont décalés par certains translateZ, puis en utilisant perspective et rotateX/rotateY sur un élément parent pour faire les choses interactives.

L’effet est extrêmement amusant. Je ne peux pas croire Fisher Price ne l’a pas déjà mis en œuvre à l’échelle du site.

En ce qui concerne l’accessibilité, j’ai quelques questions. Même dans le

sur le site, il se transforme en huit

éléments, que je ne peux pas imaginer, est super pour les lecteurs d’écran, sans parler de la multitude de éléments à l’intérieur. Je pense que vous pourriez atténuer certains des problèmes liés à un wrapper parent unique à l’aide d’un aria-label, Oui?

Le copier-coller a également des résultats étranges. Si je copie, comme, directement sur un mot, j’ai tendance à obtenir exactement ce que je veux. Mais si je copie d’avant le mot vers l’après, j’obtiendrai toutes les copies supplémentaires, ce que je ne veux absolument pas. Peut-être que cela peut être réparé avec certains user-select: none; dansant.

Ce n’est pas seulement du type, non plus! L’exemple de Bennet sur un est soigné dans la façon dont cela ressemble à l’impression d’une photo sur une toile (du monde réel) et à l’étirer autour du cadre afin que même les bords aient de la couleur.

Mon préféré est à quoi ça ressemble bien que. Trop cool.

CodePen Embed Fallback

Lien direct vers l’article – Permalien


La poste ztext.js est apparu en premier le Astuces CSS.

Vous pouvez soutenir CSS-Tricks en étant un Supporteur MVP.

Close Menu