THE CODE & INFORMATION

ALTERNATIVE PAGE TRANSITION

This code creates an interactive, single-page application that uses CSS transitions to simulate page navigation by animating the size of different content containers. The structure consists of a set of navigation buttons and a main "canvas" area (.section) that acts as a container for four distinct content pages. Each page occupies the same space within the canvas but is anchored to a different corner—top-left, bottom-right, bottom-left, or top-right—using absolute positioning.

The magic behind the animation lies in the CSS transition property applied to the .page class. Initially, every page has a width and height of zero, making them invisible. When a user clicks a button, the associated JavaScript function triggers. First, it iterates through all existing pages and resets their dimensions to zero, effectively "closing" any currently open page. Because the transition is set to 0.6 seconds, this reset happens smoothly.

To ensure the animations don't overlap awkwardly, the JavaScript uses a setTimeout function with a 300- millisecond delay. This pause ensures that the closing phase of the transition is well underway before the selected page begins to expand. After the delay, the script sets the width and height of the target page to 600px by 400px, causing it to grow from its specific corner anchor to fill the entire container. This clean, programmatic approach allows for a fluid, "game-like" UI feel without needing to fetch new HTML files from a server.

To use this code, follow these steps:

1. How to Run It

1. Open any text editor (like Notepad, VS Code, or Sublime Text).
2. Copy the entire block of code you provided and paste it into a new file.
3. Save the HTML file as index.html
4. Save the CSS file as styles.css
5. Save the Javascript file as scripts.js
6. Double-click the file to open it in your web browser.

2. How it Works (The Logic)

The code functions by managing the width and height of hidden div elements:

1. The Container (.section): This is the fixed "viewport" (600px by 400px).
2. It has overflow: hidden, which ensures that as the internal pages expand, they don't break the layout.
3. The Pages (.page): Each page is absolutely positioned at a specific corner (e.g., top: 0; left: 0; for Home).
4. Initially, they have a width and height of 0.

The JavaScript:

• When you click a button, the script first sets all pages to 0 size (closing any currently open page).
• It uses a setTimeout function (300ms) to create a short delay.
• After the delay, it sets the width and height of the selected page to 600px and 400px, causing it to "grow" outward from its specific corner.

3. How to Customize

1. Change Colors: Modify the :root section at the top of the CSS.
2. You can change var(--bg-color) to adjust the page background or change the background colors of individual .page classes in CSS.
3. Change Speed: Find transition: all 0.6s ease-in-out; inside the .page class.
4. Change 0.6s to a higher number (e.g., 1.0s) to make the transition slower, or lower (e.g., 0.3s) for snappy, fast transitions.

Add More Pages:

• Add a new <button> in the .nav section.
• Add a new <div class="page"> inside the .section container.
• Create a new CSS class for it (e.g., .gallery { bottom: 20%; right: 20%; }) to define where it originates.
• The JavaScript will automatically include your new button and page because it loops through all elements with the class .button and .page.

4. Important Notes

1. Responsiveness: This current layout is fixed at 600x400.
2. If you want it to work on mobile, you should look into CSS Media Queries to reduce the width and height values for smaller screens.
3. Content: Ensure the width in .page-content always matches the width of the .section so your text stays centered during the expansion.