jquery - Change background color saturation based on percentage loaded -

-

i want make preloader of sorts page loads instead of resizing divs width based on % loaded change saturation of background-color of div based on % loaded.

to honest don't mind if have set #fff , fade color red don't know how saturation change or % of color faded % loaded.

this have been trying:

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

example

keep background-color is, change opacity value via jquery

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

update... since can't use opacity property, can use 1 of following 2 methods:

*p.s: not efficient they're working

first method: can create multiple css classes in each define background color, each class name has numerical value can change through loop while loading , use toggle class property in code:

example1: background color

the html

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

the jquery

 var currclass= 0;  var totalclasses= 15;     window.setinterval(preloading, 200);     function preloading(){       if (currclass < totalclasses){              $('#preloader').toggleclass('pclass'+currclass+'c');                 currclass++;         };     }

the css - color classes sample

.pclass3c{ background-color:#dddeff; } .pclass4c{ background-color:#c8c9ff; } .pclass5c{ background-color:#aaacff; } .pclass6c{ background-color:#989aff; } .pclass7c{ background-color:#7c7fff; }

this method easier , more flexible since easy alter colors or add more fades, , remember more number of color classes is, smoother animation , more precise %loading value.

example1: using .png background image

second method can use css image-sprite , animate background imag's top value depending on %loading, like:

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

but in method need jquery pluging called jquery.bgpos.js can check if view page source.


Comments

Post a Comment

Popular posts from this blog

Perl - how to grep a block of text from a file -

-
it can in xml or text format. how in general grep block of text in perl? <track type="ws"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>0</locationindex> <propertyindex>0</propertyindex> </range> </track> <track type="ps" id="1"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>1</locationindex> <propertyindex>1</propertyindex> </range> </track> i want grep type="ps" , till </range> . one solution open file, read line line , match block. open(fh, "file.txt"); foreach $line (<fh>) { if ($line =~ m/type="cc"(.*?)<\/range>/) { print $1; } } but there more optimal solution without reading file line l
Read more

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

-
Image
if set mycoolbar.fixedorder true,only grip on first band hidden. well,if use delphi 7 create vcl forms application,then put coolbar on , create 3 coolbans hold other controls,only grip , top coolbands can hidden setting mycoolbar.fixedorder:=true. i've uploaded picture make things clear. you got fixedorder property wrong. fixed property not allow bands rearranged if set true . setting property of coolbar true keep user changing bands order @ runtime, user can still move , resize bands. can give advice can do, actual solution problem, well, have wait answer. my advice use 3 coolbars in row , setting "fixedorder" property true , bandborderstyle bsnone . way grip hidden on of them. about property, it's not bug of ide, actual preference of property.
Read more

javascript - Animating array of divs; only the final element is modified -

-
this baffling me @ moment. i'm experienced programmer looking throw bit of surprise fiancee on countdown page our wedding. desired effect simulated confetti falling behind main page. setup follows: i have array of divs in javascript. each div absolutely positioned on page. have interval set updates every 50 or milliseconds. on each tick, run loop on array of divs, , calculations , update positions. problem problem having, however, though can see divs created, stored array, , modified (in case, each has slight randomized rotation) during initialization phase, once tick update position starts, div stored in whatever last slot of array gets position updated. tried hard-coding each div index testing purposes, strictly last element update position. upon printing current "left" , "top" style values each div before , after calculations shows value has been changed, no visible change noticeable. here's basic code: javascript var container;
Read more