Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

introduce

China’s celebration is about to start, I first warm up a small effect to play.

In this issue, we will use SCSS + JS to create a 3D font effect that can interact with the mouse, as shown below:

Itself is not difficult to do, specific will be divided into: page structure, font style, mouse interaction three parts to explain, in addition, to explain that this is built with Vite, good we want to set up ~

The body of the

1. Page structure

<div id="app"></div>
<script type="module" src="./app.js"></script>
Copy the code

We’ll start with the main logic script in index.html via module mode.

/*app.js*/
import "./css/style.scss"; (function() {
  let words = [
    "Happy"."National"."Day"
  ]
  let wordNodes = []
  words.forEach(word= > {
    let _div = document.createElement("div");
    _div.className = "text-3d-block";
    _div.innerHTML = word;
    _div.setAttribute("data-text", word);
    wordNodes.push(_div)
    document.getElementById("app").appendChild(_div);
  })
})();
Copy the code

This step is as simple as importing styles and writing the words Happy National Day into the page. Note: Here we also attach the current value to the element’s data-text property, which is available in CSS Content for its pseudo-class.

Font style

Don’t worry, before I write the font styles, I will fill their parent container to create a background and center the elements horizontally and vertically.

#app {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-image: radial-gradient(
    circle at center center,
    rgb(248.255.107),
    rgb(245.152.118)); }Copy the code

Then, we will write the font style, using the real content as the base

$size: 4.5 em;
$space: 0.1 em;

.text-3d-block {
  font-size: $size;
  font-family: "Franklin Gothic Medium"."Arial Narrow", Arial, sans-serif;
  letter-spacing: $space;
  position: relative;
  background: repeating-linear-gradient(
    45deg.#aec9e3 0px.#ebf4f7 3px.#1689e7 3px.# 000000 2px
  );
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #1689e7;
  white-space: nowrap;
}
Copy the code

Note here that we need to use background words for the bottom word. First draw a strip background and then fill the text with background-clip. If the surface layer is added after it, the user will think that there are many layers below.

Finally, the content of the current element is retrieved from the pseudo-class to fill a font on top of the bottom word with a certain offset.

.text-3d-block {
    --x:7px;
    --y:2px;
    // ...
    &:after {
        content: attr(data-text);
        -webkit-text-stroke: 1px #1689e7;
        font-size: inherit;
        position: absolute;
        color: #FFF;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(calc(-50% - var(--x)), calc(-50% - var(--y)));
        z-index: 1;
        letter-spacing: $space;
        width: 100%; }}Copy the code

Here we also need to define the offset of the x and y axes, which will be used later in the interaction. The rest will not be described.

Now the style is almost written, but how to let him interact with the mouse?

3. Mouse interaction

/*app.js*/; (function() {
    // ...
    window.addEventListener("mousemove".e= > {
        let x = 14 * e.clientX / window.innerWidth - 7;
        let y = 4 * e.clientY / window.innerHeight - 2;
        wordNodes.forEach(node= > {
            node.style.setProperty("--x", -x + "px")
            node.style.setProperty("--y", -y + "px")})})}) ()Copy the code

We first need to listen to the mouse movement event, calculate an offset, offset coefficient can be customized. Then setProperty is used to dynamically change x and y, so as to change the offset in other pseudo-classes, so as to change the position of the purpose.

Here is the end of the whole, it is easy to stir – fried chicken kind of effect, have time to do play, online demo

Finally, I wish you a happy National Day, there is still 1 day left, we must calm down, do not say, I leave to go ~