Simple 3D elements using ztext.js
This little tool is written by Bennett Feely and currently pretty popular. It takes an existing element (DIV) and duplicates its content a given times while moving it along the z-axis giving you a simple 3D version of your content. Furthermore, it allows you to define an optional event listener to either page scrolling or mouse movement. It works with text, images and SVG although currently it doesn’t support the Vector Tool.
Getting started in Hype
Installing the JavaScript
Installing the JavaScript file is easy and if you don’t mind linking a Content Delivery Network into your project you only have to copy the following line to your Head HTML:
<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypezText/zTextHypeEdition.min.js"></script>Adding the data attribute
Just add a data-z attribute to a text element in the identity Additional Attributes panel. Even thought this already does the trick you would probably use some CSS to style the additional copies made by this extension. A quick way would be to style the added layers a little darker by adding the following style-block to your Head HTML:
<style>
.z-layer:not(:first-child) {
filter: brightness(0.7);
}
</style>You are done and should see something like this:
Going further and playing around with event listener
From here on out you can get creative and play around with all the settings found on the ztext.js documentation. Most of them can be set using only data attributes making it effortless to use.
What is different in this fork?
You can read all about the options on the ztext.js page and this fork should work accordingly. Specially the dataset attributes are the same. When it comes to the JavaScript side of things you have some differences and additions. Read about the differences on the GitHub page:
