[英]Can I use a span instead of a div with ScrollTrigger?
在我的 HTML 代码中,我在div
中有几个<span>
标签,我想使用 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 以跨度为目标工作正常。 您正在应用的转换不适用于跨度,因为它们display
为inline
。 将显示更改为inline-block
,您会看到它工作得很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.