快照ScrollMagic区段擦除
快照ScrollMagic区段擦除
提问于 2020-01-31 00:32:28
我正在使用ScrollMagic的分区擦拭在滚动上淡出一个面板到下一个面板，这工作得很完美，但我想知道是否有可能在滚动时捕捉到下一个面板(现在如果你停止滚动，你就会在两个面板之间淡入一半)。
我知道我可以使用fullpage.js，因为它们提供了确切的效果，但我不想在我已经加载了大量javascript的网站上添加另一个库，我想知道我是否可以用ScrollMagic获得同样的效果。
var controller = new ScrollMagic.Controller();
var wipeAnimation1 = new TimelineMax()
.fromTo(".panel2", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone})
.fromTo(".panel3", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone})
.fromTo(".panel4", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone});
new ScrollMagic.Scene({
triggerElement: "#slider",
triggerHook: 0,
duration: "100%"
})
.setPin("#slider")
.setTween(wipeAnimation1)
.addTo(controller);* {
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}
#spacer {
width:100%;
height:100%;
text-align:center;
}
#slider {
width: 100%;
height: 100%;
color:#ffffff;
text-align:center;
}
.panel {
height: 100%;
width: 100%;
position: absolute;
}
.panel1 { background:#000000; }
.panel2 { background:#222222; }
.panel3 { background:#444444; }
.panel4 { background:#666666; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<div id="spacer">spacer</div>
<div id="slider">
<section class="panel panel1">
<b>ONE</b>
</section>
<section class="panel panel2">
<b>TWO</b>
</section>
<section class="panel panel3">
<b>THREE</b>
</section>
<section class="panel panel4">
<b>FOUR</b>
</section>
</div>
<div id="spacer">spacer</div>
回答 1
Stack Overflow用户
发布于 2020-02-01 02:50:06
因此，来自ScrollMagic的Jan Paepke帮助提出了一个解决方案。这基本上归结为取消动画与滚动的链接，并使用触发器本身启动/动画每个面板。
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
triggerElement: "#slider",
triggerHook: 0,
duration: "700%"
})
.setPin("#slider")
.addTo(controller);
var panels = [
{
trigger: '#trigger2',
name: '.panel2'
},
{
trigger: '#trigger3',
name: '.panel3'
},
{
trigger: '#trigger4',
name: '.panel4'
}
]
for (var i=0; i<panels.length; i++) {
var panel = panels[i];
new ScrollMagic.Scene({
triggerElement: panel.trigger,
triggerHook: 0
})
.setTween(new TimelineMax()
.fromTo(panel.name, 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone}))
.addTo(controller);
}* {
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}
#spacer {
width:100%;
height:100%;
}
#trigger2 {
position: absolute;
top: 100vh;
}
#trigger3 {
position: absolute;
top: 300vh;
}
#trigger4 {
position: absolute;
top: 500vh;
}
#sliderwrapper {
position: relative;
height: auto;
}
#slider {
width: 100%;
height: 100%;
color:#ffffff;
}
.panel {
height: 100vh;
width: 100%;
position:absolute;
}
.panel1 { background:#000000; }
.panel2 { background:#222222; }
.panel3 { background:#444444; }
.panel4 { background:#666666; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<div id="spacer"></div>
<div id="sliderwrapper">
<div id="slider">
<section class="panel panel1">
<b>ONE</b>
</section>
<section class="panel panel2">
<b>TWO</b>
</section>
<section class="panel panel3">
<b>THREE</b>
</section>
<section class="panel panel4">
<b>FOUR</b>
</section>
</div>
<div id="trigger2"></div>
<div id="trigger3"></div>
<div id="trigger4"></div>
</div>
<div id="spacer"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59990467
复制相关文章
相似问题
腾讯云开发者
