My button transition to the second one is good and working but I want the background to be included in the transition, for example, In the first page I have blue background, A description box, and a “Get Started” button. I want the background color to change into red with the same transition with my button and description box then vice versa when I get to the second page. Also, my “home” button in the second page is not working, I mean the transition isn’t applied when I click it.
<!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>
<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>
<button id="getStartedButton" class="slide">Get started</button>
<div class="about">HIIIIIIIIIIIIIIIII</div>
<button id="homeButton" class="homebut">Home</button>
<script src="home.js"></script> <!-- Include JavaScript file -->
</body>
</html>
body {
background-color: blue;
}
.description {
position: relative;
margin: 100px auto 50px;
/* shorthand for margin */
width: 500px;
height: 225px;
border-radius: 30px;
padding: 75px 25px;
/* shorthand for padding */
background: linear-gradient(
90deg,
rgba(10, 135, 0, 1) 0%,
rgba(217, 98, 0, 1) 45%,
rgba(25, 179, 0, 1) 92%
);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
line-height: 25px;
/* Transition for description opacity */
}
.hide-description {
animation: myAnim 2s ease-in-out 1s 1 normal forwards;
}
@keyframes myAnim {
0% {
transform: translateY(0%);
opacity: 1;
}
95% {
transform: translateY(-190vh);
opacity: 1;
}
100% {
transform: translateY(-200vh);
opacity: 0;
}
}
.slide {
position: relative;
margin-left: 100vh;
/* shorthand for margin */
width: 150px;
height: 100px;
border-radius: 30px;
background: linear-gradient(
90deg,
rgba(10, 135, 0, 1) 0%,
rgba(217, 98, 0, 1) 45%,
rgba(25, 179, 0, 1) 92%
);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
line-height: 25px;
/* Add your button styling here */
}
.hide-button {
animation: myAnim 2s ease-in-out 1s 1 normal forwards;
}
.about {
opacity: 0;
position: fixed;
top: 45%;
left: 33.3%;
transform: translate(50%, 200vh);
margin: 0 auto;
width: 500px;
height: 225px;
border-radius: 30px;
padding: 75px 25px;
/* shorthand for padding */
background: linear-gradient(
90deg,
rgba(10, 135, 0, 1) 0%,
rgba(217, 98, 0, 1) 45%,
rgba(25, 179, 0, 1) 92%
);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
line-height: 25px;
transition: all 2s ease-in-out;
}
.show-about {
animation: myAnim1 2s ease-in-out 0s 1 normal both; }
@keyframes myAnim1 {
0% {
opacity: 0;
transform: translateY(50%);
}
100% {
opacity: 1;
transform: translateY(-50%);
}
}
.homebut {
opacity: 0;
position: fixed;
margin-top: 85vh;
margin-left: 46%;
/* shorthand for margin */
width: 150px;
height: 100px;
border-radius: 30px;
background: linear-gradient(
90deg,
rgba(10, 135, 0, 1) 0%,
rgba(217, 98, 0, 1) 45%,
rgba(25, 179, 0, 1) 92%
);
color: aliceblue;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
line-height: 25px;
/* Add your button styling here */
}
.show-homebut {
animation: myAnim2 2s ease-in-out 0s 1 normal both; }
@keyframes myAnim2 {
0% {
opacity: 0;
transform: translateY(50%);
}
50% {
opacity: 0;
transform: translateY(0%);
}
100% {
opacity: 1;
transform: translateY(-50%);
}
}
.show-slide {
animation: myAnim3 2s ease-in-out 0s 1 normal both; }
@keyframes myAnim3 {
0% {
opacity: 0;
transform: translateY(-50%);
}
50% {
opacity: 0;
transform: translateY(0%);
}
100% {
opacity: 1;
transform: translateY(50%);
}
}
.show-description {
animation: myAnim4 2s ease-in-out 0s 1 normal both; }
@keyframes myAnim4 {
0% {
opacity: 0;
transform: translateY(-50%);
}
100% {
opacity: 1;
transform: translateY(50%);
}
}
const getStartedButton = document.getElementById("getStartedButton");
const homeButton = document.getElementById("homeButton");
const desc = document.querySelector(".description");
const slideButton = document.querySelector(".slide");
// Event listener for the get started button
getStartedButton.addEventListener("click", function() {
desc.classList.add("hide-description"); // Add class to hide description
slideButton.classList.add("hide-button"); // Add class to hide button
setTimeout(function() {
document.querySelector(".about").classList.add("show-about"); // Add class to show 'about' section after transition ends
document.querySelector(".homebut").classList.add("show-homebut");
desc.style.display = "none";
slideButton.style.display = "none";
}, 2000); // Adjust this time to match the duration of the transition in CSS
});
// Event listener for the home button
homeButton.addEventListener("click", function() {
document.querySelector(".about").classList.remove("show-about"); // Remove class to hide 'about' section
document.querySelector(".homebut").classList.remove("show-homebut");
setTimeout(function() {
desc.classList.remove("hide-description"); // Remove class to show description
slideButton.classList.remove("hide-button"); // Remove class to show button
desc.style.display = "block";
slideButton.style.display = "block";
}, 2000); // Adjust this time to match the duration of the transition in CSS
});
I want everything to slide up and down and please help me fix my code
New contributor
Gon Amparo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.