Skip to content Skip to sidebar Skip to footer

Creating Multiple Masks For A Single Image

I am attempting to create the following scenario, and I'm willing to use any combination of jquery, css, and html possible (I'd like to stay away from HTML 5 right now however, but

Solution 1:

One simple method is to have the image set as a background-image on the "windows", which are absolutely positioned within #maskContainer. top and left are set, and background-position is set to match.

See: http://jsfiddle.net/thirtydot/XjCCK/
(view in a WebKit browser so the background-position animation works; it's purely for the demo)

HTML:

<div id="maskContainer">
    <div class="window static"></div>
    <div class="window moving"></div>
</div>

CSS:

#maskContainer {
    background: #000;
    width: 603px;
    height: 482px;
    position: relative;
    overflow: hidden;
}
.window {
    background: url(http://i.imgur.com/j9a2T.jpg) no-repeat;
    position: absolute;
}
.static {
    width: 80px;
    height: 80px;
    left: 20px;
    top: 30px;
    background-position: -20px -30px;
}

JavaScript:

var maskContainerWidth = $('#maskContainer').width(),
    maskContainerHeight = $('#maskContainer').height();

setInterval(function() {
    $('.moving').each(function() {
        var width = Math.floor(Math.random()*maskContainerWidth),
            height = Math.floor(Math.random()*maskContainerHeight),
            left = Math.floor(Math.random()*(maskContainerWidth-width)),
            top = Math.floor(Math.random()*(maskContainerHeight-height));

        $(this).animate({
            width: width,
            height: height,
            left: left,
            top: top,
            backgroundPositionX: -left,
            backgroundPositionY: -top
        }, 1000);
    });
}, 1000);

Solution 2:

Why not treat everything around your "masking divs" as the mask (because that's what it really is). Use either an image with transparent holes (where your masking divs are) or grid of opaque divs with transparent divs for your "masking divs). Put this image/grid over the background image. This should give you a lot of flexibility with moving the windows to the background image.


Post a Comment for "Creating Multiple Masks For A Single Image"