CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dion Verhelst
Dion Verhelst

Reputation: 3

Manual slider should not be visible on transparent areas

I've bumped into something that will most definetly be a challenge to some of you. At least it is for me and I'm hoping that someone could help me with this.

I'm using 2 images that lay on top of eachother. Then there's a divider image that you control with your cursor to slide over it from left to right, and the other way around.

<div class="green_block"></div>
<div class="triforce">
  <div class="divider"></div>
</div>

This all works, but I want the divider to not be visible when it touches a transparent area of the top image.

JSFiddle

In the case of the fiddle, the blue bar must be shown on top of the Triforce, but not on it's transparent parts. Is this even possible?

Upvotes: 0

Views: 78

Answers (3)

Dion Verhelst
Dion Verhelst

Reputation: 3

I've found a solution that works for me. I created another image where I take the background of the website as the transparent part. I placed this on top of the others and let the divider slide behind it.

Crude solution, not recommendable but in this case it will be sufficient. Thanks for all the help tho. I've learned quite a lot from it.

Upvotes: 0

Edward Lee
Edward Lee

Reputation: 951

It's possible using canvas element. Get pixel data of image using getImageData method of canvas and check rgb value. To use getImageData you need to put your script file and image on same domain because of cross domain issue. In this case, the divider is not to be visible on #00ff00.

Sample

HTML:

<canvas id="canvas"></canvas>

Javascript:

$(document).ready(function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var image=document.createElement("img");
    image.onload=function(){
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.fillStyle="#00ff00";
        ctx.fillRect(0,0,canvas.width,canvas.width);
        ctx.drawImage(image,0,0);
        init();
    }

    image.src="Triforce.png";

    function init(){
        var imageData = ctx.getImageData(0, 0, image.width, image.height);
        var data = imageData.data;
        canvas.addEventListener('mousemove', function(evt) {
            var mousePos = getMousePos(canvas, evt);
            var x = mousePos.x;
            var y = mousePos.y;

            ctx.clearRect(0,0,canvas.width,canvas.height);

            ctx.fillStyle="#00ff00";
            ctx.fillRect(0,0,canvas.width,canvas.width);

            ctx.drawImage(image,0,0);

            ctx.fillRect(x, 0, canvas.width,canvas.height);

            ctx.fillStyle="#0000ff";
            for(var i=x;i<x+10;i++){
                for(var j=0;j<image.height;j++){
                    var red = data[((image.width * j) + i) * 4];
                    var green = data[((image.width * j) + i) * 4 + 1];
                    var blue = data[((image.width * j) + i) * 4 + 2];
                    var alpha = data[((image.width * j) + i) * 4 + 3];
                    if(!(red==0 && green==255 && blue==0)){
                        ctx.fillRect(i,j,1,1);
                    }
                }
            }
        }, false);
    }

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }
});

Upvotes: 2

ilyass
ilyass

Reputation: 402

I would use a second image which is exactly the inverse of your image (transparent part=>blue/ colored => transparent).

After i would move two div at the same time at the top image. the green one and a second which will be (overflow hided) by the divider(the divider should be transparent).

The one (overflow hided) must perform an animation will the divider is moving, so it will look like the exact antagonist of your image

  <div class="green_block"></div>
   <div class="triforce">
    <div class="divider">
      <div class="antagonist-div">
      <!-- this one should move inside the divider while he is moving --> 
      </div>
    </div>
   </div>
  </div>

Upvotes: 0

Related Questions