로드 된 백분율을 기준으로 배경색 채도 변경

Question

로드 할 비율에 따라 divs 너비의 크기를 조정하는 대신 페이지가로드 될 때의 미리로드를 만들고 싶습니다. 배경색의 채도를 변경하고 싶습니다. div는로드 된 %를 기반으로합니다.

#fff를 설정 한 다음 그 색상이 빨간색으로 희미 해져도 상관 없습니다. 나는 채도 변경이나 %로 색상이 흐려지기를 좋아하는 방법을 알지 못합니다.

이

내가 노력 해왔다 것입니다 :

JS

$("#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; 
} 

Answer 1

Example

그대로 그냥 불투명도를 변경, 배경 색을 유지 jQuery를 통한 값

0 불투명도 속성을 사용할 수 없기 때문에 , 다음과 같은 두 가지 방법 중 하나를 사용할 수 있습니다

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

UPDATE ... :

* 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; } 

이 방법은 그것 때문에 더 쉽고 유연 쉬운 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 plugin이 필요하면 페이지 소스를 볼 수 있는지 확인할 수 있습니다.