update css

baponkar · Jun 1, 2024 · 942fdaf · 942fdaf
1 parent 9ccb9f1
commit 942fdaf
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git 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
@@ -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