diff --git a/css/style.css b/css/style.css index 38fa57f..4b1b298 100644 --- a/css/style.css +++ b/css/style.css @@ -81,6 +81,16 @@ body{ 100% { clip-path: inset(0% 0% 0% 0%); } } +@keyframes rollOut { + 0% { transform: rotateY(0deg); } + 100% { transform: rotateY(-90deg); } /* Roll to 90 degrees to left */ +} + +@keyframes rollIn { + 0% { transform: rotateY(-90deg); } + 100% { transform: rotateY(0deg); } /* Roll back to original position */ +} + h1{ font-family: "Roboto",sans-serif; @@ -337,7 +347,7 @@ li{ /* Add media query for Realme Narzo 30 Pro 1080 */ @media screen and (max-width: 1080px) { .page-container { - max-width: 99%; + max-width: 98%; height: auto; margin-left: 0.5%; margin-right: 0.5%; @@ -350,7 +360,7 @@ li{ } .banner{ - max-width: 99%; + max-width: 98%; height: auto; margin-left: 0.5%; margin-right: 0.5%; @@ -385,7 +395,7 @@ li{ /* Add media query for responsiveness */ @media screen and (max-width: 768px) { .page-container { - max-width: 99%; + max-width: 98%; height: auto; margin-left: 0.5%; margin-right: 0.5%; @@ -403,7 +413,7 @@ li{ } .banner{ - max-width: 99%; + max-width: 98%; height: auto; margin-left: 0.5%; margin-right: 0.5%; diff --git a/js/banner_image_anim.js b/js/banner_image_anim.js index 69af082..4f4c26d 100644 --- a/js/banner_image_anim.js +++ b/js/banner_image_anim.js @@ -1,19 +1,19 @@ // JavaScript const image = document.getElementById('animatedImage'); -function startVanishAnimation() { - image.style.animation = 'vanish 2s forwards'; +function startRollOutAnimation() { + image.style.animation = 'rollOut 2s forwards'; } -function startReloadAnimation() { - image.style.animation = 'reload 2s forwards'; +function startRollInAnimation() { + image.style.animation = 'rollIn 2s forwards'; } function startAnimationLoop() { - startVanishAnimation(); + startRollOutAnimation(); setTimeout(() => { - startReloadAnimation(); - }, 2000); // Timing should match the vanish animation duration + startRollInAnimation(); + }, 2000); // Timing should match the roll out animation duration } -setInterval(startAnimationLoop, 4000); // Adjust interval timing based on the total duration of vanish and reload +setInterval(startAnimationLoop, 4000); // Adjust interval timing based on the total duration of roll out and roll in