我正在开发的网站使用scrollmagic将事件div的颜色(每个设置为屏幕大小)在向下滚动时从回变回白色。我让它改变 div 颜色以及主体颜色以获得更无缝的过渡。由于某种原因,主体背景颜色在前 2 个触发的场景中没有变化,但在后 2 个场景中却发生了变化。我已经包含了一个说明该问题的代码笔。当您向下滚动并触发由 #blog 和 #contact 触发的最后 2 个场景时,主体颜色将被正确设置。但前两个触发器则不然 - #about 和 #portfolio。
有什么建议吗?
HTML:
</div>
<div id ="about" class="container frame">
</div>
<div id ="portfolio" class="container frame">
</div>
<div id ="blog" class="container frame">
</div>
<div id ="contact" class="container frame">
</div>
JavaScript:
$(function() {
var blockTween1 = TweenMax.to('#about', 1.5, {
backgroundColor: '#000'
});
var blockTween2 = TweenMax.to('#portfolio', 1.5, {
backgroundColor: '#fff'
});
var blockTween3 = new TweenMax.to('#blog', 1.5, {
backgroundColor: '#000'
});
var blockTween4 = new TweenMax.to('#contact', 1.5, {
backgroundColor: '#fff'
});
var blockTween5 = new TweenMax.to('body', 1.5, {
backgroundColor: '#000'
});
var blockTween6 = new TweenMax.to('body', 1.5, {
backgroundColor: '#fff'
});
var controller = new ScrollMagic.Controller();
var containerScene1 = new ScrollMagic.Scene({
triggerElement: '#about'
})
.setTween(blockTween1);
var containerScene2 = new ScrollMagic.Scene({
triggerElement: '#about'
})
.setTween(blockTween5);
var containerScene3 = new ScrollMagic.Scene({
triggerElement: '#portfolio'
})
.setTween(blockTween2);
var containerScene4 = new ScrollMagic.Scene({
triggerElement: '#portfolio'
})
.setTween(blockTween6);
var containerScene5 = new ScrollMagic.Scene({
triggerElement: '#blog'
})
.setTween(blockTween3);
var containerScene6 = new ScrollMagic.Scene({
triggerElement: '#blog'
})
.setTween(blockTween5);
var containerScene7 = new ScrollMagic.Scene({
triggerElement: '#contact'
})
.setTween(blockTween4);
var containerScene8 = new ScrollMagic.Scene({
triggerElement: '#contact'
})
.setTween(blockTween6);
controller.addScene([
containerScene1,
containerScene2,
containerScene3,
containerScene4,
containerScene5,
containerScene6,
containerScene7,
containerScene8,
]);
});
最佳答案
好吧,我想通了。无论出于何种原因,我都无法重用定义 Tween 属性的变量。对于 4 个主体过渡,我必须指定 4 个唯一变量,即使它们应用相同的效果。因此,不仅仅是:
var blockTween5 = new TweenMax.to('body', 1.5, {
backgroundColor: '#000'
});
var blockTween6 = new TweenMax.to('body', 1.5, {
backgroundColor: '#fff'
});
它变成了:
var blockTween5 = new TweenMax.to('body', 1.5, {
backgroundColor: '#000'
});
var blockTween6 = new TweenMax.to('body', 1.5, {
backgroundColor: '#fff'
});
var blockTween7 = new TweenMax.to('body', 1.5, {
backgroundColor: '#000'
});
var blockTween8 = new TweenMax.to('body', 1.5, {
backgroundColor: '#fff'
});
有适当的额外场景。
关于javascript - Scrollmagic - 使用多个补间更改主体和 div 背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32581392/