Scrollmagic

Question

我正在使用的网站使用 scrollmagic 在向下滚动时将活动 div 的颜色（每个设置为屏幕大小）从变回白色淡化。我让它改变 div 颜色以及 body 颜色以获得更无缝的过渡。出于某种原因，body 背景颜色在前 2 个场景中没有发生变化，但在最后 2 个场景中发生了变化。我提供了一个代码笔来说明这个问题。当您向下滚动并触发由#blog 和#contact 触发的最后两个场景时，body 颜色会正确设置。但不是前两个触发器——#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,

]);


});

http://codepen.io/anon/pen/OyMzQm

Answer 1

好吧，我想通了。无论出于何种原因，我都无法重用我在其中定义 Tween 属性的变量。对于 4 body 转换，我必须指定 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'
});

有适当的额外场景。

Scrollmagic - 使用多个补间更改 body 和 div 背景颜色

Scrollmagic - Changing body and div background color with multiple tweens

javascript

jquery

html