ticket-img

by Nicolas PUJOL

HTML

<div class="container no_selection" id="container">
    <img class="bg" src="http://lorempicsum.com/nemo/250/250/1" />
    <div id="mask" class="mask"></div>
</div>

CSS

body {
  margin: 0;
}
.bg {
    height: auto;
    max-height: 100%;
    width: 100%;
}
.pixel {
    display: inline-block;
    height: 5px;
    width: 5px;
}
.no_selection {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}
.mask {
    position: absolute;
    top:0;
    font-size: 0;
    line-height: 0;
}
.container {
    width: 250px;
    height: 250px;
    position: relative;
}

JavaScript

function fillMask() {
    var html = "";
    for (var i = 0; i < 2500; i++) {
        html += '<div id="pixel-' + i + '" class="pixel" style="\
        background-attachment:fixed;\
        background-image: url(\'http://lorempicsum.com/nemo/250/250/2\');\
        background-position: 0 0;"></div>';
    }
    $("#mask").html(html);
    addEvts();
}
var mouseclick = false;

function addEvts() {
    $(".pixel").on("mousedown", function () {
        reveal(this.id);
        mouseclick = true;
    });
    $(".pixel").on("mouseup", function () {
        mouseclick = false;
    });
    $(".pixel").on("mousemove", function () {
        if (mouseclick) {
            reveal(this.id);
        }
    });
}

function reveal(thisId) {
    var id = parseInt(/pixel-([0-9]*)/.exec(thisId)[1]);

    $("#" + thisId).css("background-image", "none");
    $("#pixel-" + (id + 50)).css("background-image", "none");
    $("#pixel-" + (id - 50)).css("background-image", "none");
    $("#pixel-" + (id + 100)).css("background-image", "none");
    $("#pixel-" + (id - 100)).css("background-image", "none");

    if ($("#" + thisId).position().left < 245) {
        $("#pixel-" + (id + 1)).css("background-image", "none");
        $("#pixel-" + (id - 49)).css("background-image", "none");
        $("#pixel-" + (id + 51)).css("background-image", "none");
        if ($("#" + thisId).position().left < 240) {
            $("#pixel-" + (id + 2)).css("background-image", "none");
        }
    }
    if ($("#" + thisId).position().left > 0) {
        $("#pixel-" + (id - 1)).css("background-image", "none");
        $("#pixel-" + (id + 49)).css("background-image", "none");
        $("#pixel-" + (id - 51)).css("background-image", "none");
        if ($("#" + thisId).position().left > 5) {
            $("#pixel-" + (id - 2)).css("background-image", "none");
        }
    }
}
fillMask();