延迟 baffle.js 效果直到滚动答案

【问题标题】：Delay baffle.js effect till scroll延迟 baffle.js 效果直到滚动
【发布时间】：2022-11-05 04:25:56
【问题描述】：

对于不熟悉 baffle.js 的任何人来说，它是一个用于混淆和显示文本效果的小型库，我是一名 Javascript 初学者，我一直在试图弄清楚如何延迟 baffle.js 的文本效果，直到我滚动到文本。

//Baffle
const text = baffle(".text__glitch");
text.set({
    characters: "#$&+",
    speed: 90
});
text.start();
text.reveal(1000);

* {
    margin: 0;
    padding: 0;
}
body{
  color: #fff;
  backgrounf: #fff;
  font-family: Helvetica, sans-serif;
}
section{
    width: 100%;
    min-height: 300vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #000;
}
.text__glitch{
  font-size: 30px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: Uppercase;
}

<head>
<script src="https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js"></script>
</head>
<main>
  <section class="section--1">
    <h3 class="text__glitch">Text i want to delay animation on</h3>
  </section>
</main>

【问题讨论】：

标签： javascript

【解决方案1】：

您可以使用 javascript Intersection Observer enter link description here 。如果您正在使用 react 尝试使用 react-intersection-observer enter link description here npm 包。

【讨论】：