How to Make a “Raise the Curtains” Effect in CSS

How to Make a “Raise the Curtains” Effect in CSS

The “raise the curtains” effect is a fun and eye-catching way to reveal content on a webpage. It’s an animation that imitates the look of two theater curtains gradually opening to reveal what’s inside. In this tutorial, we’ll be showing you how to create this effect using HTML and CSS.

Step 1: Create the HTML Structure

First, let’s create the basic markup for our HTML page. For the “curtain” effect, we’ll be using two div elements with the class of “curtain”. Inside each of them, we’ll add an img tag with our curtain image.

<div class="curtain">
    <img src="left-curtain.jpg" alt="Left Curtain">
</div>

<div class="curtain">
    <img src="right-curtain.jpg" alt="Right Curtain">
</div>

Step 2: Add the CSS

Now that we have our HTML structure in place, let’s move on to the CSS. To make the “curtain” effect, we’ll use the transform property and translateX function. We’ll set the initial transform value of the left div to translateX(-100%), and the right one’s value to translateX(100%). This will ensure that both curtains are off-screen when the page first loads.

.curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 2s;
}

.curtain:first-child {
    transform: translateX(-100%);
}

.curtain:last-child {
    transform: translateX(100%);
}

Step 3: Trigger the Animation

Finally, we’ll add a class of “open” to our curtains, which will trigger the animation. When the class is applied, the transform property will transition from its current value to translateX(0), revealing the content underneath.

.open {
    transform: translateX(0);
}

Conclusion

And that’s it! With just a few lines of code, you’ve now created a cool “raise the curtains” effect in CSS. You can use this effect to spice up your webpages and grab your visitors’ attention.