3D Layered Textual content: Interactivity and Dynamicism

Within the earlier two chapters, we constructed a layered 3D textual content impact, added depth and coloration, after which introduced it to life with movement. We explored static construction, animated variations, and even some intelligent ornament methods. However every thing to this point has been hard-coded.

This time, we’re going dynamic.

On this closing chapter, we’re entering into the world of interactivity by including JavaScript into the combo. We’ll begin by producing the layers programmatically, giving us extra flexibility and cleaner code (and we’ll by no means need to copy-paste divs once more). Then, we’ll add some interplay. Beginning with a easy :hover impact, and ending with a totally responsive bulging textual content that follows your mouse in actual time. Let’s go.

Clear Up

Earlier than we bounce into JavaScript, allow us to clear issues up a bit. We are going to pause the animations for now and return to the static instance we wrapped up with within the first chapter. No want to the touch the CSS simply but. Allow us to begin with the HTML.

We are going to strip it all the way down to the naked necessities. All we actually want is one component with the textual content. The category stays. It’s nonetheless the proper one for the job.

Lorem Ipsum

Scripting

It’s time. Allow us to begin including some JavaScript. Don’t fear, the impression on efficiency can be minimal. We’re solely utilizing JavaScript to arrange the layers and outline a couple of CSS variables. That’s it. All of the precise model calculations nonetheless occur off the principle thread, keep excessive frames per second, and don’t stress the browser.

We are going to start with a easy perform known as generateLayers. That is the place all of the magic of layer era will occur. To work its magic, the perform will obtain the component we wish to use because the container for the layers.

perform generateLayers(component) {
  // magic goes right here
}

To set off the perform, we’ll first create a small variable that holds all the weather with the layeredText class. And sure, we are able to have a couple of on the web page, as we’ll see later. Then, we’ll go every of those components into the generateLayers perform to generate the layers.

const layeredElements = doc.querySelectorAll('.layeredText');

layeredElements.forEach(generateLayers);

Fail Protected

Now allow us to dive into the generateLayers perform itself and begin with a small fail secure mechanism. There are conditions, particularly when working with frameworks or libraries that handle your DOM, the place a part would possibly get rendered greater than as soon as or a perform would possibly run a number of occasions. It shouldn’t occur, however we wish to be prepared simply in case.

So, earlier than we do something, we’ll verify if the component already accommodates a div with the .layers class. If it does, we’ll merely exit the perform and do nothing:

perform generateLayers(component) {
  if (component.querySelector('.layers')) return;
  
  // remainder of the logic goes right here
}

Tip: In the actual world, I’d deal with this as an opportunity to catch a rendering bug. As a substitute of silently returning, I’d most likely ship a message again to the dev crew with the related knowledge and count on the difficulty to be mounted.

Counting Layers

One last item we have to cowl earlier than we begin constructing the layers is the variety of layers. If you happen to bear in mind, we now have a CSS variable known as --layers-count, however that won’t assist us right here. In addition to, we wish this to be extra dynamic than a single hardcoded worth.

Here’s what we’ll do. We are going to outline a continuing in our JavaScript known as DEFAULT_LAYERS_COUNT. Because the title suggests, this can be our default worth. However we will even permit every component to override it by utilizing an attribute like data-layers="14".

Then we’ll take that quantity and push it again into the CSS utilizing setProperty on the mum or dad component, since we depend on that variable within the types.

const DEFAULT_LAYERS_COUNT = 24;

perform generateLayers(component) 

Including Content material

Now we now have every thing we want, and we are able to lastly generate the layers. We are going to retailer the unique textual content content material in a variable. Then we’ll construct the markup, setting the innerHTML of the mum or dad component to match the construction we utilized in all of the earlier examples. Meaning a span with the unique content material, adopted by a div with the .layers class.

Inside that div, we’ll run a loop based mostly on the variety of layers, including a brand new layer in every iteration:

perform generateLayers(component) {

  // earlier code

  const content material = component.textContent;

  component.innerHTML = `
    ${content material}
    

      ${Array.from({ size: layersCount}, (_, i) =>
        `
${content material}
`
      ).be part of('')}
    
  `;
}

And that’s it. Our 3D textual content is prepared, and all of the layers at the moment are constructed solely via JavaScript. Strive enjoying round with it. Change the textual content contained in the layeredText component. Add your title, your undertaking title, your model. Let me know the way it seems to be.

Fast notice: I additionally eliminated the --layers-count variable from the CSS, since it’s now set dynamically with JavaScript. Whereas I used to be at it, I moved the font settings out of the .layeredText component, since they need to be utilized globally or to a extra acceptable wrapper. Only a little bit of housekeeping to maintain issues clear.

Normalizing Top

Since we already added a method to set the variety of layers dynamically, allow us to make the most of it.

Right here is an instance with three totally different div components, every utilizing a unique variety of layers. The primary one (A) has 8 layers, the second (B) has 16, and the third (C) has 24.

You possibly can clearly see the distinction in top between the letters, for the reason that complete top is determined by the variety of layers. With regards to coloration although, we used the normalized worth (do not forget that?), so the gradient seems to be constant no matter top or layer rely.

We are able to simply as simply normalize the whole top of the layers. All we have to do is substitute the --layer-offset variable with a brand new one known as --text-height. As a substitute of setting the gap between every layer, we outline the whole top for the total stack. That lets us multiply the normalized worth by --text-height, and get a constant dimension irrespective of what number of layers we now have.

.layeredText {
  --text-height: 36px;

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

    remodel: translateZ(calc(var(--n) * var(--text-height)));
    coloration: hsl(200 30% calc(var(--n) * 100%));
  }
}

Counter Interplay

We’re prepared to start out reacting to person enter. However earlier than we do something, we want to consider the issues we do not wish to work together with, and meaning the additional layers.

We already dealt with them for display readers utilizing aria-hidden, however even with common mouse interactions, these layers can get in the way in which. In some instances, they may block entry to clickable components beneath.

To keep away from all of that, we’ll add pointer-events: none; to the .layers component. This makes the layers utterly ‘clear’ to mouse clicks and hover results.

.layers {
  pointer-events: none;
}

Hovering Hyperlinks

Now we are able to lastly begin responding to person enter and including a little bit of interplay. Let’s say I wish to use this 3D impact on hyperlinks, as a hover impact. It is perhaps a bit excessive, however we’re right here to have enjoyable.

We are going to begin with this straightforward markup, only a paragraph of Lorem ipsum, however with two hyperlinks inside. Every hyperlink has the .layeredText class. Proper now, these hyperlinks will have already got depth and layers utilized, however that’s not what we wish. We wish the 3D impact to seem solely on hover.

To make that occur, we’ll outline a brand new :hover block in .layeredText and transfer all of the 3D associated types into it. That features the colour and shadow of the span, the colour and translateZ of every .layer, and to make it look even higher, we will even animate the opacity of the layers.

.layeredText {
  &:hover {
    span {
      coloration: black;
      text-shadow: 0 0 0.1em #003;
    }

    .layer {
      coloration: hsl(200 30% calc(var(--n) * 100%));
      remodel: translateZ(calc(var(--i) * var(--layer-offset) + 0.5em));
      opacity: 1;
    }
  }
}

Now we have to outline the bottom look, the types that apply when there is no such thing as a hover. We are going to give the span and the layers a smooth bluish coloration, apply a easy transition, and set the layers to be totally clear by default.

.layeredText {
  show: inline-block;

  span, .layer {
    coloration: hsl(200 100% 75%);
    transition: all 0.5s;
  }

  .layer {
    opacity: 0;
  }
}

Additionally, I added show: inline-block; to the .layeredText component. This helps stop undesirable line breaks and permits us to use transforms to the component, if wanted. The result’s a hover impact that actually makes every phrase pop proper off the web page:

After all, in case you are utilizing this as a hover impact however you even have some components that ought to all the time seem with full depth, you’ll be able to simply outline that in your CSS.

For instance, allow us to say we now have each a heading and a hyperlink with the .layeredText class, however we wish the heading to all the time present the total 3D impact. On this case, we are able to replace the hover block selector to focus on each:

.layeredText {
  &:is(h1, :hover) {
    /* full 3D types right here */
  }
}

This manner, hyperlinks will solely present the impact on hover, whereas the heading stays daring and dimensional on a regular basis.

Mouse Place

Now we are able to begin working with the mouse place in JavaScript. To try this, we want two issues: the place of the mouse on the web page, and the place of every component on the web page.

We are going to begin with the mouse place, since that half is straightforward. All we have to do is add a mousemove listener, and inside it, outline two CSS variables on the physique: --mx for the horizontal mouse place, and --my for the vertical place.

window.addEventListener('mousemove', e => {
  doc.physique.model.setProperty('--mx', e.pageX);
  doc.physique.model.setProperty('--my', e.pageY);
});

Discover that I’m utilizing e.pageX and e.pageY, not e.clientX and e.clientY. That’s as a result of I would like the mouse place relative to your entire web page, not simply the viewport. This manner it really works appropriately even when the web page is scrolled.

Place Parts

Now we have to get the place of every component, particularly the prime and left values. We are going to outline a perform known as setRects that loops via all layeredElements, finds their place utilizing a getBoundingClientRect perform, and units it to a few CSS customized properties.

perform setRects() {
  layeredElements.forEach(component => {
    const rect = component.getBoundingClientRect();
    component.model.setProperty('--top', rect.prime + window.scrollY);
    component.model.setProperty('--left', rect.left + window.scrollX);
  });
}

As soon as once more, I’m utilizing window.scrollX and scrollY to get the place relative to your entire web page, not simply the viewport.

Remember the fact that studying format values from the DOM could be costly when it comes to efficiency, so we wish to do it as little as attainable. We are going to run this perform as soon as after all of the layers are in place, and once more solely when the web page is resized, since that would change the place of the weather.

setRects();
window.addEventListener('resize', setRects);

The Transferring Crimson Dot

That’s it. We’re formally executed writing JavaScript for this text. At this level, we now have the mouse place and the place of each component saved as CSS values.

Nice. So, what will we do with them?

Bear in mind the examples from the earlier chapter the place we used background-image? That’s the key. Allow us to take that very same concept and use a easy radial gradient, from crimson to white.

.layer {
  background-clip: textual content;
  coloration: clear;
  background-image: radial-gradient(circle at middle, crimson 24px, white 0);
}

However as an alternative of inserting the middle of the circle in the midst of the component, we’ll shift it based mostly on the mouse place. To calculate the place of the mouse relative to the component, we merely subtract the component’s place from the mouse place. Then we multiply by 1px, for the reason that worth have to be in pixels, and plug it into the at a part of the gradient.

.layer {
  background-image:
    radial-gradient(
      circle at calc((var(--mx) - var(--left)) * 1px)
                calc((var(--my) - var(--top)) * 1px),
      crimson 24px,
      white 0
    );
}

The result’s textual content with depth and a small crimson dot that follows the motion of your mouse.

Okay, a small crimson dot isn’t precisely thoughts blowing. However bear in mind, you aren’t restricted to that. Upon getting the mouse place, you should use it to drive all kinds of dynamic results. In only a bit, we’ll begin constructing the bulging impact that kicked off this whole collection, however in different instances, relying in your wants, you would possibly wish to normalize the mouse values first.

Normalizing Mouse Place

Identical to we normalized the index of every layer earlier, we are able to normalize the mouse place by dividing it by the whole width or top of the physique. This provides us a worth between 0 and 1.

doc.physique.model.setProperty('--nx', e.pageX / doc.physique.clientWidth);
doc.physique.model.setProperty('--ny', e.pageY / doc.physique.clientHeight);

Normalizing the mouse values lets us work with relative positioning that’s impartial of display dimension. That is good for issues like including a responsive tilt to the textual content based mostly on the mouse place.

Bulging Textual content

Now we’re lastly able to construct the final instance. The concept is similar to the crimson dot instance, however as an alternative of making use of the background-image solely to the highest layer, we’ll apply it throughout all of the layers. The colour is saved in a customized variable and used to color the gradient.

.layer {
  --color: hsl(200 30% calc(var(--n) * 100%));

  coloration: clear;
  background-clip: textual content;
  background-image:
    radial-gradient(
      circle at calc((var(--mx) - var(--left)) * 1px)
                calc((var(--my) - var(--top)) * 1px),
                var(--color) 24px,
                clear 0
    );
}

Now we get one thing much like the crimson dot we noticed earlier, however this time the impact spreads throughout all of the layers.

Brighter Base

We’re nearly there. Earlier than we go any additional with the layers, I wish to make the bottom textual content look a bit weaker when the hover impact isn’t lively. That approach, we create a stronger distinction when the total impact kicks in.

So, we’ll make the span textual content clear and enhance the opacity of its shadow:

span {
  coloration: clear;
  text-shadow: 0 0 0.1em #0004;
}

Consider, this makes the textual content almost unreadable when the hover impact isn’t lively. That’s the reason you will need to use a correct media question to detect whether or not the gadget helps hover. Apply this styling solely when it does, and regulate it for gadgets that don’t.

@media (hover: hover) {
  /* when hover is supported */
}

Fixing Sizes

That is it. The one factor left is to high-quality tune the dimensions of the gradient for every layer. And we’re executed. However I don’t need the bulge to have a linear form. Utilizing the normalized worth alone will give me evenly spaced steps throughout all layers. That leads to a form with straight edges, like a cone.

To get a extra convex look, we are able to make the most of the brand new trigonometric features obtainable in CSS. We are going to take the normalized worth, multiply it by 90 levels, and go it via a cos() perform. Identical to the normalized worth, the cosine will return a quantity between 0 and 1, however with a really totally different distribution. The spacing between values is non-linear, which provides us that clean convex curve.

--cos: calc(cos(var(--n) * 90deg));

Now we are able to use this variable contained in the gradient. As a substitute of giving the colour a hard and fast radius, we’ll multiply --cos by no matter dimension we wish the impact to be. I additionally added an absolute worth to the calculation, in order that even when --cos may be very low (near zero), the gradient nonetheless has a minimal seen dimension.

And, in fact, we don’t need sharp, distracting edges. We wish a clean fade. So, as an alternative of giving the clear a tough cease level, we’ll give it a bigger worth. The distinction between the var(--color) and the clear values will management how smooth the transition is.

background-image:
  radial-gradient(
    circle at calc((var(--mx) - var(--left)) * 1px)
              calc((var(--my) - var(--top)) * 1px),
              var(--color) calc(var(--cos) * 36px + 24px),
              clear calc(var(--cos) * 72px)
  );

And similar to that, we get an interactive impact that follows the mouse and gives the look of bulging 3D textual content:

Wrapping Up

At this level, our 3D layered textual content has gone from a static stack of HTML components to a totally interactive, mouse-responsive impact. We constructed dynamic layers with JavaScript, normalized depth and scale, added responsive hover results, and used stay enter to form gradients and create a bulging phantasm that tracks the person’s each transfer.

However greater than something, this chapter was about management. Controlling construction via code. Controlling conduct via enter. And controlling notion via gentle, coloration, and motion. And we did all of it with native net applied sciences.

That is just the start. You possibly can hold going with noise patterns, lighting, reflections, physics, or extra superior movement behaviors. Now you’ve got the instruments to discover them, and to create daring, animated, expressive typography that jumps proper off the display.

Now go make one thing that strikes.