Interactive Invitation

This project creates an interactive wedding invitation styled like a physical envelope that opens on click. When the user clicks the envelope, the top flap flips open and the invitation card slides out smoothly. The animation mimics real paper movement using CSS transforms and keyframes. The invitation text is revealed with elegant typography and timing. Overall, the project demonstrates how simple HTML, CSS, and JavaScript can recreate a tactile, real-world interaction on the web.

HTML

<div class="frame">
    <div class="message"></div>
    <div class="top"></div>
</div>

The HTML defines the envelope structure using layered div elements. The .frame acts as the outer envelope body and provides a fixed reference for positioning. Inside it, the .message element holds the actual invitation content such as names, venue, and date. The envelope flaps are built using .top, .left, .right, and .bottom divs, each shaped with CSS borders to resemble folded paper.

A clickable “Open” button invites user interaction. The layout relies on stacking order (z-index) so elements animate over and under each other correctly. Text is centered to feel like a formal invitation card. No SVG or canvas is required. The HTML remains clean and purpose-driven. Overall, it forms a realistic envelope layout ready for animation.

CSS

.open {
    transform: rotateX(180deg);
}

The CSS is the heart of this project’s visual illusion. Envelope flaps are created using large borders, which naturally form triangular shapes without images. Perspective and 3D transforms allow the top flap to rotate backward like a real envelope opening. Smooth transitions and easing functions make the motion feel natural.

The message card uses keyframe animations to slide upward and then settle back into view. Z-index changes ensure the card appears above the envelope once revealed. Hover effects on the “Open” button add polish and affordance. Colors are chosen to resemble classic stationery tones. The layout stays centered regardless of screen size. Overall, CSS transforms static shapes into a convincing physical animation.

JavaScript

$('.top').addClass('open');

The JavaScript controls the interaction logic of the envelope. It waits for the document to load before attaching click handlers. When the user clicks on the envelope frame, JavaScript adds the open class to the top flap. This class immediately triggers the CSS rotation animation. At the same time, the message element receives a class that starts the sliding card animation.

No manual animation calculations are performed in JavaScript. Instead, it relies entirely on CSS for movement and timing. This keeps the script lightweight and easy to maintain. Additional modal-related code is present for extensibility. Overall, JavaScript acts as a simple trigger layer for the visual effects.

Download Code