Ztext.js (Hype Edition)

How it works

Ztext gives the illusion of volume by creating layers from an HTML element. There's no need to spend hours fiddling with <canvas> or forcing users to download multi-megabyte WebGL libraries. With ztext, content remains fully selectable and accessible.

Over 96% of users use a web browser that supports the CSS transform-style property, which ztext needs to work. In unsupported browsers, ztext gracefully turns off.

Further information can be found here:

Differences to the original

This version focuses only on Hype documents and runs on scene load and doesn't offer the global Ztextify or zDraw function in JavaScript. The dataset interface is the same only that there is the additional event timeline that enables to transfer the 3d rotation from the Hype timeline onto the ztext. Furthermore, hypeDocument gets two new commands called hypeDocument.zTextify and hypeDocument.zDraw that mirror the global ones from the original with the difference that options are always uniform and hypeDocument.zTextify selectors run in the current scene scope rather then global.

Preview

zTextHypeEdition.html

Download Example:

Read article

https://medium.com/hype-satellite/simple-3d-elements-using-ztext-js-db975eba39da?source=friends_link&sk=d96601c24c750317cc3ca1f6db25a5c7

Visit the github Repository

8 Likes

Fantastic version for Hype!

1 Like

Max Zieb, the Wizard of Hype!

1 Like

↑ look at project
1.2 Fixed redraws with zDraw

Updated the version so hypeDocument.zDraw can be re-triggered as many times as needed. Also, the innerHTML has a cache and can be redrawn from it or reset if options.innerHTML is defined with new content or options.purgeCache is set to true. hypeDocument.zDraw now returns an "API" with the tilt function for each ztext element if needed.