Toggles envelope open/close, reveals image

by dhavaljani

HTML

<div class="envelope-wrapper">
    <div class="envelope-container">
        <div class="envelope">
            <div class="envelope-body">
                <div class="back-fold"></div>
                <div class="letter">
                    <!-- Replace HTML content with the image -->
                    <div class="letter-content">
                        <img src="https://assets.ppassets.com/p-4z7unbMGB16SwkA44oJ5mC/flyer/paper_static/base" alt="Reyansh's Janoi Invitation" class="invitation-image">
                    </div>
                </div>
                <div class="top-fold"></div>
                <div class="body"></div>
                <div class="left-fold"></div>
            </div>
            <div class="shadow"></div>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100%;
    background-color: #f5f5f5;
    background-image: url('https://assets.ppassets.com/p-5zEBG3pwAJLsOTQLicO3rB/flyer/backdrop_static/original');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
    max-height: 100vh;
    overflow: hidden;
}

.envelope-container {
    position: relative;
    perspective: 1000px;
    margin-bottom: 100px;
}

.envelope {
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.envelope-body {
    position: relative;
    height: 300px;
    width: 500px;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.envelope-body .body {
    position: absolute;
    bottom: 0;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 0 0 200px 500px;
    border-color: transparent transparent #fbf4e9 transparent;
    z-index: 2;
}

.envelope-body .top-fold {
    position: absolute;
    top: 100px;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 100px 250px 0 250px;
    border-color: #f3ddc3 transparent transparent transparent;
    transform-origin: 50% 0%;
    transition: transform 0.5s 0.5s, z-index 0.25s 0.5s;
    z-index: 2;
}

.envelope-body .back-fold {
    position: absolute;
    bottom: 0;
    height: 200px;
    width: 500px;
    background-color: #f3ddc3;
    z-index: 0;
    box-shadow: 1px 1px 5px gray;
    border-radius: 5px;
}

.envelope-body .left-fold {
    position: absolute;
    bottom: 0;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 100px 0 100px 250px;
    border-color: transparent transparent transparent #f5ead8;
    z-index: 2;
}

.envelope-body .letter {
    position: absolute;
    left: 50px;
    bottom: 0;
    height: 120px;
    width: 400px;
   ...

JavaScript

/*document.addEventListener('DOMContentLoaded', function() {
    const envelope = document.querySelector('.envelope');
    
    envelope.addEventListener('click', function() {
        envelope.classList.toggle('open');
    });
});
*/
document.addEventListener('DOMContentLoaded', function () {
    const envelope = document.querySelector('.envelope');

    // Automatically open the envelope on page load after 0.5 seconds
    setTimeout(function () {
        envelope.classList.add('open');
    }, 1000); // 500 milliseconds delay

    // Allow toggling open/close when clicked
    envelope.addEventListener('click', function () {
        // Check if the envelope is already open
        if (envelope.classList.contains('open')) {
            envelope.classList.remove('open'); // Close it
        } else {
            envelope.classList.add('open'); // Open it
        }
    });
});