3D Layered Text: Interactivity and Dynamism

In the earlier chapters, we created a layered 3D text effect, adding depth, color, and motion. We explored static structures, animations, and decorative tricks, but everything was hard-coded.

This time, we’re going dynamic.

In this final chapter, we introduce interactivity by incorporating JavaScript. We’ll generate layers programmatically for more flexibility and cleaner code, eliminating the need for copy-pasting divs. Then, we’ll add interaction, starting with a simple :hover effect and ending with a responsive bulging text that follows the mouse in real-time. Let’s dive in.

Clean Up

Before delving into JavaScript, let’s tidy up. We’ll pause animations and revert to the static example from the first chapter. No CSS changes yet—just HTML.

We’ll simplify the HTML to essentials: one element with text. The class remains the same.

Scripting

Now, let’s add JavaScript. The performance impact will be minimal, as JavaScript only sets up layers and defines a few CSS variables. Style calculations remain off the main thread, maintaining high fps without stressing the browser.

We’ll start with a function called generateLayers to handle layer generation. The function will receive the element to use as the container for layers.

“`javascript
function generateLayers(element) {
// magic goes here
}
“`

To trigger the function, we’ll create a variable holding all elements with the layeredText class. We can have multiple elements on the page. Then, we’ll pass each element into generateLayers to generate layers.

“`javascript
const layeredElements = document.querySelectorAll(‘.layeredText’);

layeredElements.forEach(generateLayers);
“`

Fail Safe

Let’s add a fail-safe mechanism in generateLayers. In cases where components might render multiple times or a function runs repeatedly, we’ll check if the element already contains a div with the .layers class. If it does, we’ll exit the function.

“`javascript
function generateLayers(element) {
if (element.querySelector(‘.layers’)) return;

// rest of the logic goes here
}
“`

Counting Layers

Before building layers, we need to determine the number of layers. We’ll define a constant DEFAULT_LAYERS_COUNT. Elements can override it using an attribute like data-layers=”14″. We’ll push that number into the CSS using setProperty on the parent element.

“`javascript
const DEFAULT_LAYERS_COUNT = 24;

function generateLayers(element) {
if (element.querySelector(‘.layers’)) return;

const layersCount = element.dataset.layers || DEFAULT_LAYERS_COUNT;
element.style.setProperty(‘–layers-count’, layersCount);
}
“`

Adding Content

We can now generate layers. We’ll store the original text content in a variable. Then, we’ll build the markup, setting the innerHTML of the parent element to match the structure from previous examples. A span with the original content, followed by a div with the .layers class. Inside that div, we’ll run a loop based on the number of layers, adding a new layer in each iteration.

“`javascript
function generateLayers(element) {

// previous code

const content = element.textContent;

element.innerHTML = `
${content}

`;
}
“`

Our 3D text is ready, with all layers built through JavaScript. Try changing the text inside the layeredText element. Add your name, project name, or brand and see how it looks.

Quick note: I removed the –layers-count variable from the CSS, as it’s now set dynamically with JavaScript. I also moved font settings out of the .layeredText element for cleaner organization.

Normalizing Height

With dynamic layer setting, let’s normalize total height. We’ll replace –layer-offset with –text-height. Instead of setting distance between layers, we define total stack height. This allows multiplying normalized value by –text-height for consistent size regardless of layer count.

“`css
.layeredText {
–text-height: 36px;

.layer {
–n: calc(var(–i) / var(–layers-count));

transform: translateZ(calc(var(–n) * var(–text-height)));
color: hsl(200 30% calc(var(–n) * 100%));
}
}
“`

Counter Interaction

Let’s start reacting to user input. We don’t want to interact with extra layers, which might block access to clickable elements. We’ll add pointer-events: none; to .layers, making them ‘transparent’ to mouse clicks and hover effects.

“`css
.layers {
pointer-events: none