Thiết kế website giá rẻ

Question

I have made the proper or correct transitions on how I want my elements/page to appear but the problem is the transition from the first page to second page. The second page isn’t sliding up smoothly and it just appear right before the first page finish the animation/transition of sliding up.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <link rel="stylesheet" href="home.css">
</head>
<body class="main">
  <div class="logo-container">
    <img src="Yusisista map logo.ico" alt="Logo" class="logo">
  </div>
  
  <header>Yusisista Mini-map</header>

  <div class="description">Yusisista Minimap is a web-based application that provides students and visitors with 
    easy access to navigate the UCC Congress campus, 
    allowing them to locate desired facilities, offices,
    and rooms with ease and efficiency.
  </div>

  <div class="bg1"></div>
  <div class="bg2"></div>

  <button id="getStartedButton" class="slide">Get started</button>
  
  <div class="second-page">
    <div class="about">Yusisista Minimap is a web-based application that provides students and visitors with 
      easy access to navigate the UCC Congress campus, 
      allowing them to locate desired facilities, offices,
      and rooms with ease and efficiency.
    </div>
    <button id="homeButton" class="homebut">Home</button>
  </div>

  <script src="home.js"></script> <!-- Include JavaScript file -->
</body>
</html>

/* Styles for header */
header {
  background: linear-gradient(to bottom, #e89d3a, #00732cbd);
  padding: 20px;
  color: white;
  font-size: 24px;
  width: 100%; 
  box-sizing: border-box; 
  position: fixed; 
  top: 0; 
  left: 0; 
 z-index: 1000;
}

.logo-container {
  position: fixed;
  top: 0px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  z-index: 1001; /* Ensure it's above the header */
}

.logo {
  width: 65px;
  height: 65px;
}

/* Background styles */
.bg1, .bg2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-color: white; /* Set background color to white */
  transition: opacity 2s ease-in-out;
}

/* Description box style */
.description {
  position: relative;
  margin: 100px auto 30px;
  width: 500px;
  height: 225px;
  border-radius: 30px;
  padding: 75px 15px;

  background: linear-gradient(to bottom, #e89d3a, #00732cbd);

  color: rgb(255, 255, 255);
  font-size: 25px;
  
  text-align: justify;
  line-height: 45px;
}

.slide {
  position: relative;
  margin-left: 100vh;
  width: 150px;
  height: 100px;
  border-radius: 30px;
  background: linear-gradient(to bottom, #e89d3a, #00732cbd);
  
  color: aliceblue;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  line-height: 25px;
}

/* Styles for the second page */
.second-page {
  display: none; /* Initially hidden */
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
  transform: secPage 2s ease-in-out;
}


.about {
  opacity: 0;
  position: absolute;
  top: -500px;
  left: 500px;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 225px;
  border-radius: 30px;
  padding: 75px 25px;
  background: linear-gradient(to bottom, #e89d3a, #00732cbd);
  color: rgb(255, 255, 255);
  font-size: 27px;
  text-align: justify;
  line-height: 35px;
  transition: all 2s ease-in-out;
}

.homebut {
  opacity: 0;
  position: absolute;
  bottom: -80px;
  left: 1375px;
  transform: translateX(-50%);
  width: 130px;
  height: 50px;
  border-radius: 30px;
  background: linear-gradient(to bottom, #e89d3a, #00732cbd);
  color: aliceblue;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  line-height: 10px;
}

document.addEventListener("DOMContentLoaded", function() {
  const bgRed = document.querySelector(".bg1");
  const bgBlue = document.querySelector(".bg2");

  const getStartedButton = document.getElementById("getStartedButton");
  const description = document.querySelector(".description");
  const homeButton = document.getElementById("homeButton");
  const about = document.querySelector(".about");
  const homeBut = document.querySelector(".homebut");
  const slide = document.querySelector(".slide");
  const secondPage = document.querySelector(".second-page");

  // Initially hide the second page elements
  bgBlue.style.opacity = 0;
  secondPage.style.display = "none";
  about.style.transition = "transform 2s ease-in-out, opacity 2s ease-in-out";
  homeBut.style.transition = "transform 2s ease-in-out, opacity 2s ease-in-out";

  getStartedButton.addEventListener("click", function() {
    // Slide up elements on the first page
    bgRed.style.transition = "transform 2s ease-in-out";
    description.style.transition = "transform 2s ease-in-out";
    getStartedButton.style.transition = "transform 2s ease-in-out";
    slide.style.transition = "transform 2s ease-in-out";

    bgRed.style.transform = "translateY(-100vh)";
    description.style.transform = "translateY(-100vh)";
    getStartedButton.style.transform = "translateY(-100vh)";
    slide.style.transform = "translateY(-100vh)";

    setTimeout(function() {
      // Show the second page smoothly
      secondPage.style.display = "block";
      bgBlue.style.opacity = 1;
      about.style.opacity = 1;
      homeBut.style.opacity = 1;
      about.style.transform = "translateY(0)"; // Slide up to the center
      homeBut.style.transform = "translateY(0)"; // Slide up to the center
    
    }, 1000); // Adjust the timing accordingly

    // Slide up animation for the second page elements
    about.style.transform = "translateY(100%)";
    homeBut.style.transform = "translateY(100%)";
    about.style.opacity = 0;
    homeBut.style.opacity = 0;
    setTimeout(function() {
      about.style.transition = "transform 2s ease-in-out, opacity 2s ease-in-out";
      homeBut.style.transition = "transform 2s ease-in-out, opacity 2s ease-in-out";
      about.style.transform = "translateY(0)";
      homeBut.style.transform = "translateY(0)";
      about.style.opacity = 1;
      homeBut.style.opacity = 1;
    }, 1200); // Adjust the timing accordingly
  });

  homeButton.addEventListener("click", function() {
    // Slide down elements on the second page
    about.style.transform = "translateY(200vh)";
    homeBut.style.transform = "translateY(200vh)";
    about.style.opacity = 0;
    homeBut.style.opacity = 0;

    setTimeout(function() {
      // Show the first page sliding down
      bgRed.style.transition = "transform 2s ease-in-out";
      description.style.transition = "transform 2s ease-in-out";
      getStartedButton.style.transition = "transform 2s ease-in-out";
      slide.style.transition = "transform 2s ease-in-out";

      bgRed.style.transform = "translateY(0)";
      description.style.transform = "translateY(0)";
      getStartedButton.style.transform = "translateY(0)";
      slide.style.transform = "translateY(0)";

      // Hide the second page after sliding down
      secondPage.style.display = "none";
      bgBlue.style.opacity = 0;
    }, 900); // Wait for the second page elements to slide down before showing the first page
  });
});

This is my whole code and I don’t know how I will fix it. Also, I’m a beginner so help would really be appreciated. Idk where’s the problem, if it’s in the css or js

Thiết kế website giá rẻ

Danh mục

website page animation/transition problem