Наложение изображений

11 июля 2023 146 просмотров

Помимо странного описания мне был приведён пример — там то ли стирался верхний слой, либо добавлялся поверх нижнего, притом было несколько элементов управления — видно было, что оснастка эта была у кого-то позаимствована.

Ок, хули бы и да, подумал я, принцип-то понятен. Не нравилась мне только оснастка — с телефона с таким управляться неудобно, потому было принято решение набросать что-нибудь визуально простое, без лишних элементов.

Для начала нам понадобится 2 изображения одинакового разрешения. И немного JS. HTML "на глаз". CSS — по вкусу.

<html>
<title>Заголовок</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!--запрещаем масштабирование, чтобы верстка не поплыла-->
<script type="text/javascript"> /*ивент для мыши*/
    document.addEventListener('mousemove', function(e) {
        var body = document.querySelector('body');
        var eraser = document.createElement("span");
        eraser.style.left = -50 + e.offsetX+'px';
        eraser.style.top = -50 + e.offsetY+'px';
        body.appendChild(eraser);
    });
</script>
<script type="text/javascript"> /*ивент для тача*/
    document.addEventListener('touchmove', function(y) {
        var body = document.querySelector('body');
        var eraser = document.createElement("span"); /*да, технически мы рисуем, а не стираем, но выглядит-то так, будто стираем*/
        var touches = event.touches;
        if (touches.length > 0) {
            var touch = touches[0];
            eraser.style.left = -50 + touch.clientX+'px';
            eraser.style.top = -50 + touch.clientY+'px';
            body.appendChild(eraser);
        }
    });
</script>
<style>
* {
    margin: 0;
    padding: 0; /*отступы не нужны*/
}
body {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: url("/images/2023/07/11/00/00.jpg");
    background-size: 100% auto;
    background-position: center;
    background-blend-mode: multiply; /*режим наложения слоев*/
    background-repeat: no-repeat;
}
span {
    display: block;
    position: absolute;
    width: 100px; /*ширина блока */
    height: 100px; /*высота блока */
    background: url("/images/2023/07/11/00/01.jpg");
    background-size: 100% auto; /*растягиваем с сохранением пропорций*/
    background-attachment: fixed; /*фон не перемещается вместе с элементом*/
    background-repeat: no-repeat; /*фон не размножается*/
    background-position: center; /*центрируем*/
    border-radius: 50%; /*скругляем края*/
    pointer-events: none; /*не может быть целью*/
}
</style>
</html>

И, сразу же, пример.

upd Товарищ тут предложил рацуху — сделать кнопку сброса для мобильных устройств, что ж, почему бы и нет, заодно дополним нашу писанину стандартными тегами (пример подправлен):

<html>
<head>
<title>Заголовок</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <!--запрещаем масштабирование, чтобы верстка не поплыла-->
<body>
<button class="mobbutton" onclick="resetPage()">сброс</button>
<script>
    function resetPage() {
    // Используем объект location для перезагрузки страницы
    location.reload();
}
</script>
<script type="text/javascript"> /*ивент для мыши*/
    document.addEventListener('mousemove', function(e) {
        var body = document.querySelector('body');
        var eraser = document.createElement("span");
        eraser.style.left = -50 + e.offsetX+'px';
        eraser.style.top = -50 + e.offsetY+'px';
        body.appendChild(eraser);
    });
</script>
<script type="text/javascript"> /*ивент для тача*/
    document.addEventListener('touchmove', function(y) {
        var body = document.querySelector('body');
        var eraser = document.createElement("span"); /*да, технически мы рисуем, а не стираем, но выглядит-то так, будто стираем*/
        var touches = event.touches;
        if (touches.length > 0) {
            var touch = touches[0];
            eraser.style.left = -50 + touch.clientX+'px';
            eraser.style.top = -50 + touch.clientY+'px';
            body.appendChild(eraser);
        }
    });
</script>
<style>
* {
    margin: 0;
    padding: 0; /*отступы не нужны*/
}
body {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: url("/images/2023/07/11/00/00.jpg");
    background-size: 100% auto;
    background-position: center;
    background-blend-mode: multiply; /*режим наложения слоев*/
    background-repeat: no-repeat;
}
span {
    display: block;
    position: absolute;
    width: 100px; /*ширина блока */
    height: 100px; /*высота блока */
    background: url("/images/2023/07/11/00/01.jpg");
    background-size: 100% auto; /*растягиваем с сохранением пропорций*/
    background-attachment: fixed; /*фон не перемещается вместе с элементом*/
    background-repeat: no-repeat; /*фон не размножается*/
    background-position: center; /*центрируем*/
    border-radius: 50%; /*скругляем края*/
    pointer-events: none; /*не может быть целью*/
}
.mobbutton {
    display: none; <!--по-умолчанию кнопка — спрятана-->
}
@media (max-width: 600px) { <!--проверяем ширину окна и пишем стиль кнопки-->
    .mobbutton {
    background: #00000000;
    font-size: 14px;
    text-transform: uppercase;
    padding: 5px;
    color: #536370;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    display: block;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
}
}
</style>
</body>
</html>