Make an image transparent and fill with color relative to a percentage value

Question

I found the following on codepen and really liked this effect. Now I'm trying to adapt this to my needs and ran into some problems:

Whenever a user scrolls down or is resizing his screen, the image is behaving weird (I can't describe it in my own words, see jsfiddle for what I mean). I guess this problem might relate to the 'background-attachment: fixed' property.

See:

.image {
    width:100%;
    height:100%;
    position:absolute;
    bottom:0;
    background:url("http://lorempixel.com/400/200/") fixed top center no-repeat;
    background-clip:content-box;
    opacity: 0.4;
    filter: alpha(opacity=40);
}
.show {
    width:100%;
    height:100%;
    position:absolute;
    bottom:0;
    background:url("http://lorempixel.com/400/200/") fixed top center no-repeat;
    background-clip:content-box;
}

I tried to experiment with both, the position of the div and the background-attachment property, but I didn't get a decent result. You can see my updated fiddles for that (Rev.: 2-4).

Does one of you have an idea of how I can use this effect without the shown weird behaviours? Maybe there's some jQuery magic with whose help I can achieve this effect? It would be best if the solution also supports the IE 8, but it's not a must at this point, as I only want to understand what I did wrong.

Thanks in advance.

Answer 1

The problem is that author used fixed background attachment, without it the script is more complex. If I get it right you want to control the position by clicking the buttons.

I created a snippet that will give you a good starting point: JSnippet

As you can see things are more complex there but it does not uses fixed background and allows you to easily update the "loading" to any point you want, I have not tested it but it should work on most of the browsers and even older once.

You can set all you need using attributes:

• data-loader-size -> sets the size.
• data-back-image -> sets the back image.
• data-front-image -> sets the front image.
• data-update-to -> For the controls set the percentage you want.

The CSS:

div.loader {
    position:relative;
    background-repeat:no-repeat;
    background-attachment: scroll;
    background-clip:content-box;
    background-position:0 0;
    margin:0;
    padding:0;
}
div.loader .loaded {   
    position:absolute;
    top:0;
    left:0;
    background-repeat:no-repeat;
    background-attachment: scroll;
    background-clip:content-box;
    background-position:0 0;
    margin:0;
    padding:0;
}
div.loader .position {
    position:absolute;
    left:0;
    border-top:1px dashed black;
    width: 100%;
    text-align:center;
    margin:0;
    padding:0;
    min-height: 40px;
}
div.loader .position div {
    font-family: 'Concert One';
    background:#2f574b;
    width: 25%;
    margin:0;
    padding:5px;
    margin: 0 auto;
    text-align:center;
    border-radius: 0 0 4px 4px;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color:white;
}

The HTML:

<div class="loader" 
     data-loader-size="450px 330px" 
     data-back-image="http://fdfranklin.com/usf-bull-bw.png" 
     data-front-image="http://fdfranklin.com/usf-bull.png"
>
    <div class="loaded"></div>    
    <div class="position"><div>0%</div></div>
</div>
<br><br>
<div>
    <button class="set-loader" data-update-to="0">Set 0%</button>
    <button class="set-loader" data-update-to="25">Set 25%</button>
    <button class="set-loader" data-update-to="50">Set 50%</button>
    <button class="set-loader" data-update-to="100">Set 100%</button>
</div>

The jQuery:

$(function() {

var loader_class = ".loader",
    control_class=  ".set-loader";

var oLoader = {
    interval     : 10,
    timer        : null,
    upPerc       : 0,
    upHeight     : 0,
    curHeight    : 0,
    step         : 1,
    diff_bg      : 0,
    diff_top     : 0,
    size         : $(loader_class).data("loader-size").split(" "),
    heightInt    : 0,
    bimage       : $(loader_class).data("back-image"),
    fimage       : $(loader_class).data("front-image"),
    loader       : $(loader_class).children('.loaded').eq(0),
    position     : $(loader_class).children('.position').eq(0),
    pos_height   : 0
}; 
oLoader.heightInt = parseInt(oLoader.size[1],10);
oLoader.pos_height = parseInt($(oLoader.position).height(),10);

$(loader_class).css({
    width: oLoader.size[0],
    height: oLoader.size[1],
    'background-image':'url(' + oLoader.fimage + ')',
    'background-size':oLoader.size.join(' ')
});
$(oLoader.loader).css({
    width: oLoader.size[0],
    height: oLoader.size[1],
    'background-image':'url(' + oLoader.bimage + ')',
    'background-size':oLoader.size.join(' ')
});
$(oLoader.position).css({
    bottom: 0 - oLoader.pos_height
});
$(control_class).each(function(){
    $(this).click(function(){
        clearInterval(oLoader.timer);
        oLoader.upPerc = parseInt($(this).data('update-to'));
        oLoader.upHeight = Math.ceil((oLoader.upPerc/100)*oLoader.heightInt);
        oLoader.upHeight = (oLoader.upHeight>oLoader.heightInt?oLoader.heightInt:oLoader.upHeight);   
        oLoader.curHeight = parseInt($(oLoader.loader).height(),10);
        oLoader.step = (oLoader.upHeight>(oLoader.heightInt - oLoader.curHeight)?-1:1);              
        oLoader.diff_bg = (oLoader.step === 1?
            (oLoader.heightInt - oLoader.curHeight) - oLoader.upHeight:
             oLoader.upHeight - (oLoader.heightInt - oLoader.curHeight));
        oLoader.diff_top = parseInt($(oLoader.position).css('bottom'),10);
        oLoader.timer = setInterval(function () {
            if (oLoader.diff_bg) {
                oLoader.diff_bg--;
                oLoader.curHeight += oLoader.step;
                oLoader.diff_top  += -oLoader.step;
                oLoader.calc_perc = Math.ceil((oLoader.diff_top + oLoader.pos_height) / oLoader.heightInt * 100);
                oLoader.calc_perc = (oLoader.calc_perc < 0?0:oLoader.calc_perc);
                oLoader.calc_perc = (oLoader.calc_perc > 100?100:oLoader.calc_perc);
                $(oLoader.loader).css({ height: oLoader.curHeight });
                $(oLoader.position).css({ bottom: oLoader.diff_top  });
                $(oLoader.position).children('div').text(oLoader.calc_perc + "%");
            } else { 
                clearInterval(oLoader.timer); 
                $(oLoader.position).children('div').text(oLoader.upPerc + "%");
            }
        }, oLoader.interval);
    });
});

});