如何解决我可以在 ScrollTrigger 中使用 span 而不是 div 吗?
在我的 HTML 代码中,我在 <span>
中有几个 div
标签,我想使用 GSAP 的插件 ScrollTrigger 为它们设置动画。但是当我使用 span 元素而不是几个 <div>
标签时,它似乎不起作用。代码如下:
HTML:
<div class="big-Box">
<span id="Box">The</span>
<span id="Box01">rain</span>
<span id="Box02">slacked</span>
<span id="Box03">still</span>
<span id="Box04">more.</span>
<span id="Box05">They</span>
<span id="Box06">crowded</span>
<span id="Box07">to</span>
<span id="Box08">the</span>
<span id="Box09">huge</span>
<span id="Box10">door.</span>
<span id="Box11">The</span>
<span id="Box12">rain</span>
<span id="Box13">stopped.</span>
</div>
JS:
gsap.registerPlugin(ScrollTrigger);
let t1 = gsap.timeline();
t1.to("#Box",{
scrollTrigger:{
trigger: "#Box",start: "top 80%",end: "top 25%",scrub: true,markers: true
},x: 1000
})
解决方法
ScrollTrigger 以跨度为目标工作正常。您正在应用的 transform 不适用于跨度,因为它们的 display
为 inline
。将显示更改为 inline-block
,您会看到它工作正常。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。