紧贴墙面运动的文字

news2024/11/24 7:41:16

效果展示

在这里插入图片描述

CSS 知识点

clip-path 属性的运用
视觉错觉运用

实现页面基础结构

<section>
  <!-- 右侧文字 部分 -->
  <div class="skew1">
    <h2 class="layer">Corner Text</h2>
  </div>
  <!-- 左侧文字 部分 -->
  <div class="text_box">
    <div class="skew2">
      <h2 class="layer">Corner Text</h2>
    </div>
  </div>
</section>

效果实现思路

想要实现上述的效果，我们可以用两个相同色系的色块来作为墙体，只是一个色块的明亮程度高点，另外一个色块的明亮度比较低，这样就可以形成视觉差，这样就可以让我们看到一个转角的墙体。其中需要注意的是，明亮度高的墙体我们可以使用clip-path控制元素展示区域的部分。

文字我们也采用两个文字来实现，一个文字在明亮度高的墙体上，一个文字在明亮度低的墙体上。在明亮度低的文字在视觉上要比较暗，并且两个文字都进行旋转形成一个夹角。

做到上述两点后，整体效果就会给人感觉文字在紧贴墙脚折行。

实现右侧暗部分的背景效果

section {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #222;
  overflow: hidden;
}

实现左侧明亮部分的背景效果

section .text_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  /* 使用 clip-path 属性控制元素的展示部分 */
  clip-path: polygon(0 0, 53% 0, 53% 100%, 0% 100%);
}

实现文字效果

.skew1 h2,
.text_box .skew2 h2 {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 12em;
  line-height: 1em;
  color: #0488f5;
  cursor: pointer;
}

/* 背阴面的透明度进行修改，从而有视觉上的错差 */
.skew1 h2 {
  opacity: 0.6;
}

/* 进行旋转，从而长生对应的折叠效果 */
.skew1 {
  position: relative;
  top: 50px;
  transform: skewY(20deg);
}

.skew2 {
  position: relative;
  top: 91px;
  transform: skewY(340deg);
}

实现文字跟随鼠标移动

document.addEventListener("mousemove", (e) => {
  document.querySelectorAll(".layer").forEach((layer) => {
    let x = (window.innerWidth - e.pageX * 2) / 2;
    layer.style.transform = `translateX(${x}px)`;
  });
});