根據加載的百分比更改背景顏色飽和度

我想製作一個預加載器，其中通過加載頁面而不是調整基於％加載的div寬度我想更改背景顏色的飽和度基於％加載的div。根據加載的百分比更改背景顏色飽和度

說實話，我不介意如果我必須設置#fff，然後將該顏色淡化爲紅色，我只是不知道如何喜歡飽和度改變或顏色百分比隨着％加載而消失。

這是我一直在努力：

$("#preloader").each(function() { 
    $(this) 
     .data("origColor", $(this).backgroundColor()) 
     .backgroundColor('#f4421a') 
     .animate({ 
      backgroundColor: $(this).data("origColor") 
     }, 1200); 
});

CSS

@-webkit-animation changeColor { 
    0% { background-color: $white; } 
    100% { background-color: $orange; } 
} 
.js div#preloader { 
    @include position(fixed, $z:9999); 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    background: $loading no-repeat center center, $header-bg-mobile repeat top left, lighten($black,70%); 
    -webkit-animation: changeColor 2s linear infinite; 
}

來源

2013-05-04 Daimz

Example

保持背景顏色，因爲它是隻是改變透明度價值通過jQuery

$("#preloader").each(function() { 
    $(this).css('opacity','0'); 
    //function to calculate the % loading ... 
    $(this).animate({opacity: '1'}, 4000); 
});

UPDATE ... 既然你不能使用opacity屬性，可以使用以下兩種方法之一：

* PS：效率不高，但他們正在努力

第一種方法：您可以創建多個CSS類，其中每個類定義背景顏色，每個類名都有一些數值，我們可以在加載時通過循環更改，並使用類似此代碼中的切換類屬性：

EXAMPLE1: background color

的HTML

<div id="preloader" class="pClass0c"></div>

jQuery的

var currClass= 0; 
var TotalClasses= 15; 
    window.setInterval(Preloading, 200); 
    function Preloading(){ 
     if (currClass < TotalClasses){ 
      $('#preloader').toggleClass('pClass'+currClass+'c'); 
       currClass++; 
     }; 
    }

的CSS - 顏色類樣品

.pClass3c{ background-color:#dddeff; } 
.pClass4c{ background-color:#c8c9ff; } 
.pClass5c{ background-color:#aaacff; } 
.pClass6c{ background-color:#989aff; } 
.pClass7c{ background-color:#7c7fff; }

這種方法更簡單，更靈活，因爲它是EAS y可以改變顏色或增加更多的淡入淡出效果，並且記住顏色類別的數量越多，動畫越平滑，加載的值越精確。

EXAMPLE1: Using .PNG as background image

第二種方法您可以使用CSS圖像精靈和取決於％負載，喜歡動畫的背景IMAG頂級值：

var BGpos= -15500; 
     $('#preloader').css({backgroundPosition: "0 -15500px"}); 
     window.setInterval(Preloading, 200); 
     function Preloading(){ 
      if (BGpos < 0){ 
       $('#preloader').css({backgroundPosition: "0 "+BGpos+"px"}); 
       BGpos= BGpos+ 1500; 
      }; 
     }

但在這種方法中，你需要一個叫做jquery.bgpos.js的jquery插件，你可以檢查你是否查看頁面源代碼。

來源

2013-05-04 14:28:01

謝謝。不幸的是（這是我的錯，我沒有說），但是我使用了一個位於我的站點之上的over-lay，然後window.load，它淡出並被刪除。所以我不能真正使用不透明度。％計算如何工作？ – Daimz 2013-05-04 15:58:36

我設法找到預製preload函數的東西，然後用css動畫改變bg顏色。雖然在我看來，它並不是實際測量頁面加載，而是其他的東西，它確實應該測量頁面加載時間。這就是我所做的[鏈接]（http://jsfiddle.net/daimz/gHuLw/1/） – Daimz 2013-05-04 17:26:06

@Daimz，檢查我更新的答案。 – 2013-05-04 18:41:30

根據加載的百分比更改背景顏色飽和度

回答

相關問題