i add some animation in css files in .box

nidhiupman568 · Jun 10, 2024 · dc20963 · dc20963
1 parent 75602f7
commit dc20963
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
     <title>NIDHI UPMAN PORTFOLIO-INSPIRED BY SUPER MARIO GAME</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -9,10 +8,9 @@
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"
         integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
     <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
     <link href="public/main.css?v=10" rel="stylesheet">
-
-
-
+    <script src="public/main.js?v=10"></script> <!-- Ensure this path matches your file structure -->
 </head>
 
 <body>
@@ -138,4 +136,5 @@ <h1 style="font-weight: bold;">THANK YOU!</h1>
 
 </body>
 
-</html>
+</html>
+
diff --git a/public/game.js b/public/game.js
@@ -6,7 +6,7 @@ var direction = false;
 var music_play = false;
 var interval_left = false;
 var interval_right = false;
-
+var jumping = false;
 
 if (ismobile) scroll_x -= 170;
 else scroll_x -= 240;
@@ -19,11 +19,9 @@ $('.tweet').click(function () {
 });
 
 function moveTo(pos) {
-
     diff = ismobile ? 10 : 15;
 
     if (pos == 'left') {
-
         if (!direction) {
             direction = 'left';
             $('#mario').css('-webkit-transform', 'scaleX(-1)');
@@ -32,9 +30,7 @@ function moveTo(pos) {
         scroll_x += diff;
         mario_x -= 65;
         if (mario_x == -195) mario_x = 0;
-
     } else if (pos == 'right') {
-
         if (!direction) {
             direction = 'right';
             $('#mario').css('-webkit-transform', 'scaleX(1)');
@@ -43,18 +39,14 @@ function moveTo(pos) {
         scroll_x -= diff;
         mario_x -= 65;
         if (mario_x == -195) mario_x = 0;
-
     } else {
         direction = false;
     }
 
-
     // reach end
     if (scroll_x < (parseInt($('#scroll').css('width')) * -1)) {
         scroll_x = $(window).width();
-
-
-        // reach start
+    // reach start
     } else if (scroll_x > $(window).width()) {
         scroll_x = parseInt($('#scroll').css('width')) * -1;
     }
@@ -64,7 +56,6 @@ function moveTo(pos) {
     $('#mario').css('background-position-x', mario_x + 'px');
 }
 
-
 function playMusic() {
     if (!music_play) {
         document.getElementById("bg_music").play();
@@ -74,7 +65,6 @@ function playMusic() {
 
 function moveLeft() {
     playMusic();
-
     direction = false;
     if (!interval_left) {
         interval_left = setInterval(function () {
@@ -85,7 +75,6 @@ function moveLeft() {
 
 function moveRight() {
     playMusic();
-
     direction = false;
     if (!interval_right) {
         interval_right = setInterval(function () {
@@ -101,11 +90,18 @@ function stopMove() {
     interval_right = false;
 }
 
-
-
+function jump() {
+    if (!jumping) {
+        jumping = true;
+        $('#mario').addClass('jump');
+        setTimeout(function () {
+            $('#mario').removeClass('jump');
+            jumping = false;
+        }, 600); // Match this duration with the CSS animation duration
+    }
+}
 
 $(function () {
-
     $("body, #scroll").click(function () {
         playMusic();
     });
@@ -115,6 +111,8 @@ $(function () {
             moveLeft();
         } else if (e.keyCode == 39) {
             moveRight();
+        } else if (e.keyCode == 32) {
+            jump();
         }
     });
 
@@ -133,5 +131,4 @@ $(function () {
     $('#btn_left, #btn_right').on('mouseup touchend', function (event) {
         stopMove();
     });
-
-});
+});
diff --git a/public/main.css b/public/main.css
@@ -6,6 +6,62 @@ b{margin-bottom:15px;font-size:30px;}
 #floor{position: absolute;background:url('img/floor.png');bottom: 0;width: 100%;left: 0;height: 106px;}
 #scroll{image-rendering: crisp-edges;position:fixed;top:0;bottom:106px;width:3125px;background:url('img/background.png');background-position:left bottom;background-repeat:no-repeat;background-size:auto 100%;}
 #mario{background-image:url('img/mario.png?v=2');background-position:top left;background-repeat:no-repeat;position:fixed;z-index:9999;bottom:106px;left:50%;margin-left:-30px;width:65px;height:129px;background-blend-mode: color;}
-.box{position:relative;height:370px;float:left;background:white;padding:20px;margin-left:100px;top:50%;margin-top:-200px;width:300px;}
+/* styles.css */
+
+
+.box {
+    position: relative;
+    height: 370px;
+    float: left;
+    background: white;
+    padding: 20px;
+    margin-left: 100px;
+    top: 50%;
+    margin-top: -200px;
+    width: 300px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.box:hover {
+    transform: scale(1.1);
+    background-color: #f8f9fa;
+}
+
+.hidden-content {
+    display: none;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    text-align: center;
+    border-radius: 5px;
+    transition: opacity 0.3s ease;
+}
+
+.box:hover .hidden-content {
+    display: block;
+    opacity: 1;
+}
+/* Jump animation for Mario */
+@keyframes jump {
+    0% { bottom: 0; }
+    50% { bottom: 150px; } /* Adjust this value to control the height of the jump */
+    100% { bottom: 0; }
+}
+
+#scroll #mario {
+    position: relative;
+    bottom: 0;
+}
+
+#scroll #mario.jump {
+    animation: jump 0.6s ease-in-out;
+}
+
+
 #btn_left{font-size:80px;color:white;position:fixed;left:0;bottom:-25px;cursor:pointer;}
 #btn_right{font-size:80px;color:white;position:fixed;right:0;bottom:-25px;cursor:pointer;}