调整现有Reveal Image Animation代码以匹配目标网站动画效果

Here's the modified code that matches the reveal animation from the reference site:

<!DOCTYPE html>
<html>
<head>
    <style>
        .image-container {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 100vh auto;
            overflow: hidden;
        }

        .image-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            z-index: 2;
            transform: translateX(0);
            transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .image-container.in-view .overlay {
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="https://assets.zyrosite.com/AR0exeRVKXF4KQNo/w10-YbNbRanwNRF6lPw4.png" alt="Your Image">
        <div class="overlay"></div>
    </div>

    <script>
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('in-view');
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.image-container').forEach(container => {
            observer.observe(container);
        });
    </script>
</body>
</html>

Key Changes Made: #

• Overlay Color: Swapped dark semi-transparent background for solid white (#ffffff) to match the reference site's design.
• Animation Mechanism: Replaced scaleX transform with translateX to create a smooth horizontal slide-off effect, aligning with the reference's wipe animation.
• Scroll Trigger: Added Intersection Observer to start the animation when the image enters the viewport, mirroring the reference's scroll-activated reveal.
• Timing Curve: Used cubic-bezier(0.77, 0, 0.175, 1) for a natural, polished animation flow.
• Container Dimensions: Adjusted size to better match the reference site's image proportions.

内容的提问来源于stack exchange，提问作者B Mahfoud