CODEWITHSUNDEEP
jqueryhtmlcss
kylex
kylex

Reputation: 14416

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 I'm willing to look at it if it is the only solution).

I would like to have a large image ONLY viewable where the masks lie on it. I've tried multiple techniques, none of which work. Any suggestions would be much appreciated!

enter image description here

Upvotes: 1

Views: 3313

Answers (2)

thirtydot
thirtydot

Reputation: 228182

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

Upvotes: 3

DorkRawk
DorkRawk

Reputation: 770

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.

Upvotes: 0

Related Questions