Pay what you want
TipAre you using ztext and happy with it? Your kind support keeps open-source JS libraries like this free for others.
Initialization
There are multiple ways to use ztext. Pick whichever method is easiest for you.
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 98% 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.
Initialize with HTML attributes
Include ztext.min.js on your site before the closing </body> tag on your HTML file. For example:
HTML
<script src="/path/to/ztext.min.js"></script>
With this method, ztext will look for any HTML element with the data-z or data-z="true" attribute and will apply a 3D effect to it.
See Options the below for a full list of possible data-z-XXXXX attributes.
HTML
<h1>
<span data-z data-z-layers="3" data-z-depth="0.5em">A</span>
</h1>
Structurally, ztext turns that code into this:
<h1 data-z data-z-layers="3" data-z-depth="0.5em">
<span class="z-text">
<span class="z-layers">
<span class="z-layer">A</span>
<span class="z-layer">A</span>
<span class="z-layer">A</span>
</span>
</span>
</h1>Preview
A
The duplicate layers are visible to users but ztext makes them hidden from screen readers and other forms of user interaction.
Initialize with JavaScript
Use ztext with vanilla JS with new Ztextify(selector, {}). This constructor accepts two arguments: the HTML element selector and an options object.
JS
var ztxt = new Ztextify(".hero-text", {
depth: "30px",
layers: 8,
fade: true,
direction: "forwards",
event: "pointer",
eventRotation: "35deg"
});
Use with React
Check out react-ztext by Safi Nettah (snettah).
Styling
Start with this CSS snippet and style ztext any way you want. Ztext works with absolutely any font that works on the web. Plus, it's easy to integrate with CSS animations and transitions.
CSS
h1 {
font: bold 5em "Georgia", serif;
color: #90a4ae;
}
.z-text {
/* Tip: Apply CSS transforms here */
/* rotateX() == up/down */
/* rotateY() == left/right */
transform: rotateX(15deg) rotateY(-30deg);
}
.z-layer:not(:first-child) {
color: #455a64;
}
CSS
But wait, there's more!
Ztext isn't just for text. Add a third dimension to SVG, emojis, and images.
HTML
<span data-z data-z-layers="15" data-z-depth="50px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="200" height="200">
<path d="..." />
</svg>
</span><span data-z data-z-depth="40px">
<img width="150" height="120" src="images/grace.jpg" alt="Photo of Grace">
<span><span data-z data-z-layers="20" data-z-depth="50px">😂🔥🍔</span>
CSS
.z-layer:not(:first-child) {
filter: brightness(0.7);
}
😂🔥🍔