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.
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
});
});/* 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;
}<!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>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