飞行文本动画效果

news2024/11/17 4:38:23

效果展示

在这里插入图片描述

JavaScript 知识点

textContent.replace 方法运用
anime.min.js 插件运用

实现整体页面布局

<section>
  <p class="text">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit suscipit
    iure explicabo delectus laborum architecto, dolorem ratione beatae vero! Sit
    nobis commodi beatae nemo accusamus eaque repellendus ipsam non molestias.
  </p>
</section>

段落语句拆分成单独的字符

const texts = document.querySelector(".text");
texts.innerHTML = texts.textContent.replace(/\S/g, "<span>$&</span>");

文字样式实现

section .text {
  position: relative;
  text-align: center;
  color: #00cefe;
  margin: 40px;
  max-width: 650px;
}

section .text span {
  position: relative;
  display: inline-block;
}

使用`anime.min.js`实现动画效果

const animation = anime.timeline({
  targets: ".text span", // 动画执行者
  easing: "easeInOutExpo", // 动画缓冲类型
  loop: true, // 动画重复执行
});

// add 是添加一个动画环节
animation
  .add({
    rotate: function () {
      return anime.random(-360, 360);
    },
    translateX: function () {
      return anime.random(-500, 500);
    },
    translateY: function () {
      return anime.random(-500, 500);
    },
    duration: 5000,
    delay: anime.stagger(20),
  })
  .add({
    rotate: 0,
    translateX: 0,
    translateY: 0,
    duration: 5000,
    delay: anime.stagger(20),
  });