Page Reveal Effect with Rounding

2 min read 09-11-2024

The page reveal effect is a popular design technique used in web development to create visually appealing transitions as users navigate between different pages or sections of a website. This effect can enhance user experience and engagement by adding a touch of elegance and sophistication to the overall design. In this article, we will explore how to implement a page reveal effect with rounded corners.

Understanding the Page Reveal Effect

The page reveal effect involves a smooth transition where a new page gradually "reveals" itself as the previous page fades out. This effect can be particularly effective for storytelling websites, portfolios, or any web application that benefits from smooth, engaging transitions.

Benefits of the Page Reveal Effect

Enhanced User Experience: Smooth transitions can make navigating a website feel more fluid and intuitive.
Visual Appeal: The effect adds a stylish and modern touch to web design.
Brand Identity: Custom animations can reinforce a brand's personality and tone.

Implementing the Page Reveal Effect with Rounding

1. HTML Structure

To create a basic structure for our page reveal effect, we need an HTML layout. Below is a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Reveal Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="page" id="page1">
            <h1>Welcome to Page 1</h1>
            <button onclick="revealPage('page2')">Go to Page 2</button>
        </div>
        <div class="page" id="page2">
            <h1>Welcome to Page 2</h1>
            <button onclick="revealPage('page1')">Go to Page 1</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS Styling

We will use CSS to create the rounded corners and style our pages. Here's how to set it up:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px; /* Rounded corners */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#page1 {
    background-color: #ffcc00;
    opacity: 1;
}

#page2 {
    background-color: #00ccff;
    opacity: 0;
    transform: translateX(100%);
}

3. JavaScript Functionality

The JavaScript code will handle the transition between pages. Below is a simple script to implement the page reveal effect:

function revealPage(pageId) {
    const currentPage = document.querySelector('.page:not([style*="opacity: 0"])');
    const nextPage = document.getElementById(pageId);

    if (currentPage !== nextPage) {
        currentPage.style.opacity = '0'; // Fade out current page
        currentPage.style.transform = 'translateX(-100%)'; // Move out
        nextPage.style.opacity = '1'; // Fade in next page
        nextPage.style.transform = 'translateX(0)'; // Move in
    }
}

Conclusion

The page reveal effect with rounding can significantly enhance the visual experience of a website. By following the steps outlined above, you can create a smooth and elegant transition between pages, making your website not only functional but also visually appealing. Experiment with different styles, durations, and animations to find the perfect combination that fits your brand and design aesthetic.