TweenMax在函數輸出 - 如何實現條件？

我正在使用JS庫：GSAP連同ScrollMagic.io JanPaepke。TweenMax在函數輸出 - 如何實現條件？

Scrollmagic.io讓我來觸發滾動一旦某些觸發要素一些CSS改變達到，JS腳本是這樣的：

var controller = new ScrollMagic.Controller(); 
         var scene = new ScrollMagic.Scene({ 
           triggerElement: "#trigger1" 
          }) 
          .setTween(new TimelineMax().add([ 
           TweenMax.to("header", 0.5, {backgroundColor: "rgba(40,80,01, 0.95)", height:"6%", width:"100%", top:"0", borderRadius:"0px"}), 
           TweenMax.to(".headernav", 0.5, {color:"white", fontSize:"1.5em", marginTop:"10px"}), 
           TweenMax.to(".circle", 0.5, {height:"35px", marginTop:"10px"}), 
           TweenMax.to("#logo", 0.5, {width:"70px", marginTop:"-10px", marginRight:"500px"}) 
          ])) 
          .addTo(controller);

一般 - 它會改變位置，背景顏色和字體一旦它滾動到網站的白色區域，我的菜單的顏色，以便它仍然是可見的，易於閱讀。

問題是我的a：懸停菜單內停止工作。而菜單的背景是「白」，顏色 -

$("#verticalnav p").hover(over, out); 

    function over(){ 
      TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"}) 
    } 

    function out(){ 
      TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"}) 
    }

這使得它做工精細，但還有一兩件事要制定出：「暗灰」字體的我已經使用此發現了一個解決辦法非常明顯/可讀，但它在滾動後仍然在綠色背景上保持「暗淡」。

下面是截圖說明更清楚地表現出來：沒有懸停

默認菜單狀態：

在： - 懸停使用JS上面顯示的顏色使用腳本修改：

此處菜單的某些屬性隨字體顏色一起更改爲在綠色背景上更易讀：

這裏是它的外觀，當鼠標在鏈接的OUT一樣，留下「暗灰」因爲劇本使它：

我的問題是 - 如何可以我實現有條件進入這個腳本：

$("#verticalnav p").hover(over, out); 

function over(){ 
     TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"}) 
} 

function out(){ 
     TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"}) 
}

因此它會讀取當前顏色值並根據此值運行TweenMax.to以特定顏色？我相當綠色與JS所以任何形式的建議將不勝感激。

Regards，達米安。

來源

2017-03-19 Damian Doman

其實看來，我沒有得到答案的時間越長，我變得越有創意。

已經工作了，幾乎基本的JS/jQuery需要，發佈它，所以也許有人可以稍後使用它。這裏是功能懸停的工作代碼：

      $("#verticalnav p").hover(over, out); 

         function over(){ 
          TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"}) 
         }; 

         function out(){ 
          var kolor = $("header").css("background-color"); 
          if (kolor == "rgba(255, 255, 255, 0.901961)") { 
          TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"}) 
          } 
          else { 
           TweenMax.to(this, 0.5, {color:"white", scale:"1"}) 
          } 
         };

來源

2017-03-19 20:09:28

TweenMax在函數輸出 - 如何實現條件？

回答

相關問題