使用jQuery滾動動態顏色變化

我有一個div，當我向下滾動頁面時，顏色會從透明變爲不透明。此代碼當前使用靜態RGB值，然後根據滾動位置添加不透明度值。使用jQuery滾動動態顏色變化

$(document).ready(function() { 
    $(window).scroll(function() { 

     var windowHeight = $(window).height(); 
     var $scrollPercent = ($(document).scrollTop()/windowHeight); 

     if ($(document).scrollTop() > 100) { 
      $(".fade-overlay").css({backgroundColor:'rgba(0,168,80,'+$scrollPercent+')'}); 
     } else { 
      $(".fade-overlay").css({backgroundColor:'rgba(0,168,80,'+$scrollPercent+')'}); 
     } 
    }); 
});

我想將靜態RGB值更改爲動態RGB值。

目前，我在名爲'primary_colour'的字段中有高級自定義字段創建的十六進制顏色值。我可以將這個值作爲'background-color'輸出到div，但不知道是否可以將它轉換爲RGB並將其插入到我已有的代碼中？

任何人都可以幫助我解決我的困惑，如何讓這個工作？我感謝您提供的任何幫助。

來源

2015-02-08 Allen T

你會想使用php轉換它[檢查此鏈接]（http://css-tricks.com/snippets/php/convert-hex-to-rgb/） – Mark 2015-02-08 22:42:14

你並不需要的顏色格式轉換，只是（取其顏色值，你已經或）設置你的動態背景顏色的十六進制值，然後分別設置不透明度：

var primaryColour = "#00a850"; 

$(".fade-overlay").css({backgroundColor: primaryColour}); 
$(".fade-overlay").css({opacity: $scrollPercent});

來源

2015-02-08 22:44:27

使用jQuery滾動動態顏色變化

回答

相關問題