Javascript 只有当鼠标向下滚动到特定区域时，才可以开始设置此文本效果的动画吗？

这是用HTML、CSS和JS制作的打字文本效果。 这是我的代码：

（函数（$）{
var s，
Spanizelletters={
设置：{
字母：$（'.js spanize'），
},
init:function（）{
s=此参数设置；
这是bindEvents（）；
},
bindEvents:function（）{
s、 html（函数（i，el）{
//spanizeLetters.joinChars（）；
var spanizer=$.trim（el）.split（“”）；
返回“”+spanizer.join（“”）+“”；
});
},
};
spanizeLetters.init（）；
})（jQuery）
正文{
保证金：0；
宽度：100%；
字体系列：“Cutive Mono”，monospace；
线高：1.5；
字体大小：400；
字体风格：普通；
-ms文本大小调整：100%；
-webkit文本大小调整：100%；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本呈现：优化易读性；
}
九月{
边界：0；
宽度：3em；
高度：1px；
利润率：1米0；
背景色：rgba（255、255、255、0.4）；
}
.桅杆{
位置：相对位置；
显示器：flex；
对齐项目：居中；
宽度：100%；
高度：100vh；
颜色：#fff；
背景色：#111；
}
.桅杆：在{
z指数：0；
内容：''；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景：rgba（17,17,17,0.9）；
}
.桅杆>收割台{
z指数：2；
位置：相对位置；
}
.mast__bg{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：100vh；
保证金：0；
填充：0；
背景尺寸：封面；
背景职位：50%；
}
.mast___头{
填充：5%；
}
.mast____标题{
字体系列：“Cutive Mono”，monospace；
字号：1em；
字体大小：400；
字母间距：0.3em；
文本转换：大写；
}
.桅杆标题跨度{
-webkit动画：字母辉光0.7s，两种动画都轻松；
动画：字母光晕0.7s，两个都轻松；
}
.mast___标题跨度：第n个孩子（1）{
-webkit动画延迟：0.05秒；
动画延迟：0.05秒；
}
.mast___标题跨度：第n个孩子（2）{
-webkit动画延迟：0.1s；
动画延迟：0.1s；
}
.mast___标题跨度：第n个孩子（3）{
-webkit动画延迟：0.15s；
动画延迟：0.15s；
}
.mast___标题跨度：第n个孩子（4）{
-webkit动画延迟：0.2s；
动画延迟：0.2s；
}
.mast___标题跨度：第n个孩子（5）{
-webkit动画延迟：0.25s；
动画延迟：0.25s；
}
.mast___文本{
字体系列：“Cutive Mono”，monospace；
字号：1em；
边缘：0.5em；
线高：1.5；
空白：预处理；
}
.mast__文本跨度{
-webkit动画：字母辉光0.7s，两种动画都轻松；
动画：字母光晕0.7s，两个都轻松；
}
.mast_uu文本跨度：第n个子项（1）{
-webkit动画延迟：0.05秒；
动画延迟：0.05秒；
}
.mast_uu文本跨度：第n个子项（2）{
-webkit动画延迟：0.1s；
动画延迟：0.1s；
}
.mast_uu文本跨度：第n个子项（3）{
-webkit动画延迟：0.15s；
动画延迟：0.15s；
}
.mast_uu文本跨度：第n个子项（4）{
-webkit动画延迟：0.2s；
动画延迟：0.2s；
}
.mast_uu文本跨度：第n个子项（5）{
-webkit动画延迟：0.25s；
动画延迟：0.25s；
}
.mast_uu文本跨度：第n个子项（6）{
-webkit动画延迟：0.3s；
动画延迟：0.3s；
}
.mast_uu文本跨度：第n个子项（7）{
-webkit动画延迟：0.35s；
动画延迟：0.35s；
}
.mast_uu文本跨度：第n个子项（8）{
-webkit动画延迟：0.4s；
动画延迟：0.4s；
}
.mast_uu文本跨度：第n个子项（9）{
-webkit动画延迟：0.45秒；
动画延迟：0.45秒；
}
.mast_uu文本跨度：第n个子项（10）{
-webkit动画延迟：0.5s；
动画延迟：0.5s；
}
.mast_uu文本跨度：第n个子项（11）{
-webkit动画延迟：0.55s；
动画延迟：0.55s；
}
.mast_uu文本跨度：第n个子项（12）{
-webkit动画延迟：0.6s；
动画延迟：0.6s；
}
.mast_uu文本跨度：第n个子项（13）{
-webkit动画延迟：0.65s；
动画延迟：0.65s；
}
.mast_uu文本跨度：第n个子项（14）{
-webkit动画延迟：0.7s；
动画延迟：0.7s；
}
.mast_uu文本跨度：第n个子项（15）{
-webkit动画延迟：0.75秒；
动画延迟：0.75s；
}
.mast_uu文本跨度：第n个子项（16）{
-webkit动画延迟：0.8s；
动画延迟：0.8s；
}
@-webkit为字母发光设置关键帧{
0% {
不透明度：0；
文本阴影：0px 0px 1px rgba（255,255,255,0.1）；
}
66% {
不透明度：1；
文本阴影：0px 0px 20px rgba（255,255,255,0.9）；
}
77% {
不透明度：1；
}
100% {
不透明度：0.7；
文本阴影：0px 0px 20px rgba（255，255，255，0）；
}
}
@关键帧字母发光{
0% {
不透明度：0；
文本阴影：0px 0px 1px rgba（255,255,255,0.1）；
}
66% {
不透明度：1；
文本阴影：0px 0px 20px rgba（255,255,255,0.9）；
}
77% {
不透明度：1；
}
100% {
不透明度：0.7；
文本阴影：0px 0px 20px rgba（255，255，255，0）；
}
}

样品

这是一个样本

您确实使用了。这是一个本机
JavaScript
功能，当一个或多个元素与视口相交时，可以使用它添加
类。下面是一个代码中带有注释的示例。向下滚动查看它的运行情况


函数onEntry（条目）{
entry.forEach（el=>{
if（el.isIntersecting）{
el.target.classList.add（“开始”）；
}
});
}
//实例化一个新的交叉点观察者
let observer=新的IntersectionObserver（onEntry）；
//具有“js spanize”类的所有元素
让elements=document.queryselectoral（“.js spanize”）；
对于（元素的elm）{
观察者，观察者（elm）；
}
@关键帧字母发光{
0% {
不透明度：0；
文本阴影：0px 0px 1px rgba（255,255,255,0.1）；
}
66% {
不透明度：1；
文本阴影：0px 0px 20px rgba（255,255,255,0.9）；
}
77% {
不透明度：1；
}
100% {
不透明度：0.7；
文本阴影：0px 0px 20px rgba（255，255，255，0）；
}
}
.js-spanize.start{
动画：字母辉光0.7s 0s无限交替；
}

样品