我正在使用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>
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>