Создание нескольких масок для одного изображения

Question

Я пытаюсь создать следующий сценарий, и я готов использовать любую возможную комбинацию jquery, css и html (однако я бы хотел сейчас отказаться от HTML 5, но я хочу посмотрите на это, если это единственное решение).

Мне бы хотелось, чтобы большое изображение можно было просматривать ТОЛЬКО там, где на нем лежат маски. Я пробовал несколько методов, ни одна из которых не работает. Любые предложения будут высоко ценится!

Answer 1

Один простой способ - установить изображение как «1001 *» в «окнах», которые абсолютно расположены в пределах #maskContainer. top и left установлены, а background-position соответствует.

См .: http://jsfiddle.net/thirtydot/XjCCK/
(посмотрите в браузере WebKit, чтобы анимация background-position работала; это чисто для демонстрации)

HTML:

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

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

Answer 2

Почему бы не относиться ко всему вокруг ваших «маскирующих элементов» как к маске (потому что это действительно так). Используйте изображение с прозрачными отверстиями (где ваши маскирующие элементы) или сетку непрозрачных элементов с прозрачными элементами для ваших «маскирующих элементов». Поместите это изображение / сетку поверх фонового изображения. Это должно дать вам большую гибкость при перемещении окна для фонового изображения.