Как реализовать шторку на двух кратинках?

Для реализации шторки на двух изображениях с помощью JavaScript можно воспользоваться HTML, CSS и JavaScript. Вот пошаговая инструкция:

1. **HTML**: В HTML создадим разметку для двух изображений и элемента, который будет являться шторкой (например, <div>):

<div class="container">
    <img src="image1.jpg" id="image1" />
    <img src="image2.jpg" id="image2" />
    <div id="curtain"></div>
</div>

2. **CSS**: Напишем стили для наших элементов, чтобы они отображались правильно:

.container {
    position: relative;
    overflow: hidden;
}

#image1, #image2 {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s;
}

#image2 {
    z-index: -1; /* Помещаем второе изображение под первым */
}

#curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Ширина шторки */
    height: 100%;
    background-color: white; /* Цвет шторки */
    transition: transform 0.5s;
}

3. **JavaScript**: Добавим обработчик события клика для элемента-шторки, который будет анимировать открытие и закрытие шторки:

const curtain = document.getElementById('curtain');

curtain.addEventListener('click', function() {
    if (curtain.style.transform === 'translateX(-50%)') {
        curtain.style.transform = 'translateX(0)';
        document.getElementById('image2').style.transform = 'translateX(0)';
    } else {
        curtain.style.transform = 'translateX(-50%)';
        document.getElementById('image2').style.transform = 'translateX(-100%)';
    }
});

4. **Итог**: После выполнения этих шагов, у вас будет создана шторка на двух изображениях. При клике на шторку она будет открываться или закрываться, показывая или скрывая второе изображение.

Таким образом, приведенный выше код позволит вам реализовать эффект шторки на двух изображениях с использованием HTML, CSS и JavaScript.