Scrollmagic-通過多個補間更改正文和div背景顏色

Question

我正在工作的網站在向下滾動時，使用scrollmagic將活動div的顏色（每個div設置為屏幕大小）從后退為白色。 我可以更改div顏色以及主體顏色，以實現更無縫的過渡。 由於某些原因，在觸發的前兩個場景中，主體背景顏色沒有變化，但在最后兩個場景中，背景顏色沒有變化。我包括一個說明問題的代碼筆。 向下滾動並觸發由#blog和#contact觸發的最后兩個場景時，將正確設置主體顏色。 但不是前兩個觸發器-#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個主體轉換，我必須指定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'
});

有適當的額外場景。