Create 3D Interactive Typography With JavaScript And CSS3 – ztext.js

Preview:

Description:

ztext.js is a fancy JavaScript library to create 3D interactive typography using CSS3 transform-style property.

Not only text, the library also supports images, SVGs, emoji, and even iconic font.

How to use it:

1. Download the package and load the ztext.min.js script in the document.

<script src="ztext.min.js"></script>

2. Attach the function to the target text and config the effect with the following parameters:

• depth: The depth of the effect on the z-axis
• direction: “both”, “backwards”, or”forwards”
• event: “none”, “pointer”, “scroll”, “scrollX”, or “scrollY”
• eventRotation: The maximum rotation to be applied
• eventDirection: “default” or “reverse”
• fade: Fade away the text
• layers: The number of layers that make up the effect
• perspective: Set distance from the viewer

<h2>
  <span class="demo">CSS</span>
  <span class="demo">Script</span>
</h2>

var ztxt = new Ztextify(".demo", {
    depth: "1rem",
    direction: "both",
    event: "none",
    eventRotation: "30deg",
    eventDirection: "default",
    fade: false,
    layers: 10,
    perspective: "500px",
    z: true,
});

3. You can also apply the effect to each character of your text using data-z-OPTION attributes:

<h2>
  <span data-z data-z-layers="3" data-z-depth="0.5em">CSS</span>
</h2>

4. Apply the effect to non-text elements like images, emoji, icons, etc.

<h2>
  <span data-z data-z-layers="3" data-z-depth="0.5em">
    <img src="image.jpg" alt="Image Alt">
  </span>
</h2>

5. Apply additional CSS classes to the effect.

.z-text {
  transform: rotateX(15deg) rotateY(-30deg);
}
.z-layer:not(:first-child) {
   color: #455a64;
}
...