飞行文本动画效果

效果展示

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>
1
2
3
4
5
6
7

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

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

文字样式实现

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

section .text span {
  position: relative;
  display: inline-block;
}
1
2
3
4
5
6
7
8
9
10
11
12

使用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),
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

完整代码下载

完整代码下载