My falling ball animation (#2357)

* my falling ball animation * corrected path on include.js * added stars animation * replaced wrong file with the right gif file
zero-to-mastery · Oct 27, 2023 · a5de383 · a5de383
1 parent 37d696a
commit a5de383
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 0 deletions.
diff --git a/Art/Ornitcg/fallingBall/ball1.gif b/Art/Ornitcg/fallingBall/ball1.gif
diff --git a/Art/Ornitcg/fallingBall/index.html b/Art/Ornitcg/fallingBall/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="refresh" content="200">
+    <title>Falling ball </title>
+    <link rel="stylesheet" type= "text/css" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="ball">
+
+        </div>
+    </div>   
+
+</body>
+</html>
diff --git a/Art/Ornitcg/fallingBall/style.css b/Art/Ornitcg/fallingBall/style.css
@@ -0,0 +1,34 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+
+.container {
+    background-color: black;
+    height: 100vh;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+
+
+}
+
+.ball {
+
+    height: 150px;
+    width: 150px;
+    background: radial-gradient(circle at 20px 20px, #FAF803, #ffffff);
+    border-radius: 50%;    
+    transition: transform 3s cubic-bezier(0.98, 0.05, 0.54, 0.95)n; 
+
+
+}
+
+body:hover {
+    .ball {
+        background: radial-gradient(circle at 20px 20px, #EB3BED, #ffffff);
+        transform: translateY(500%);
+    }
+
+}
diff --git a/Art/Ornitcg/stars/index.html b/Art/Ornitcg/stars/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- <meta http-equiv="refresh" content="3"> -->
+    <title>NightSky</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div class="sky">
+        <div class="row">
+            <div class="star"></div>
+            <div class="star"></div>            
+        </div>
+        <div class="row">
+            <div class="star"></div>
+            <div class="star"></div>   
+            <div class="star"></div>                    
+            <div class="star"></div>               
+        </div>
+        <div class="row">
+            <div class="star"></div>
+            <div class="star"></div>            
+            <div class="star"></div>            
+
+        </div>
+        <div class="row">
+            <div class="star"></div>
+            <div class="star"></div>   
+            <div class="star"></div>                    
+            <div class="star"></div>   
+
+        </div>
+        <div class="row">
+            <div class="star"></div>
+            <div class="star"></div>            
+        </div>        
+
+    </div>
+
+</body>
+</html>
diff --git a/Art/Ornitcg/stars/stars.gif b/Art/Ornitcg/stars/stars.gif
diff --git a/Art/Ornitcg/stars/style.css b/Art/Ornitcg/stars/style.css
@@ -0,0 +1,55 @@
+body {
+    margin: 0;
+}
+.row {
+    width:auto;
+    height: 100vh;
+    background-color: darkblue;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+}
+
+.sky {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.star {
+    height: 50px;
+    width: 50px;
+    background-color: white;
+    clip-path: polygon(44% 6%, 61% 35%, 91% 29%, 69% 54%, 78% 86%, 50% 70%, 23% 85%, 32% 57%, 6% 41%, 39% 35%);
+    transform: scale(200%) rotate(50deg);      
+    animation: sparkle 3000ms 5;
+}
+
+@keyframes sparkle {
+
+    0%   {
+        height: 50px;
+        width: 50px;
+        background-color: red;
+        transform: scale(100%) rotate(50deg);
+        clip-path: polygon(44% 6%, 61% 35%, 91% 29%, 69% 54%, 78% 86%, 50% 70%, 23% 85%, 32% 57%, 6% 41%, 39% 35%);
+
+    }
+    25%  {
+        background-color: yellow;
+        transform: scale(70%) rotate(50deg);
+        clip-path: polygon(40% 6%, 61% 35%, 91% 29%, 69% 54%, 88% 86%, 50% 70%, 23% 85%, 32% 57%, 6% 41%, 39% 35%);
+
+    }
+    50%  {
+        background-color: rgba(0, 255, 247, 0.976);
+        transform: scale(100%) rotate(50deg);
+        clip-path: polygon(40% 6%, 61% 35%, 91% 29%, 69% 54%, 88% 86%, 50% 70%, 13% 85%, 32% 57%, 6% 41%, 39% 35%);
+    }
+    100% {
+        background-color: green;
+        transform: scale(100%) rotate(50deg);
+    }
+}
+
diff --git a/include.js b/include.js
@@ -415,6 +415,20 @@ const cards = [
     author: 'Himanshu Chauhan',
     githubLink: 'https://github.com/Himanshuch8055'
   },
+  {
+    artName: 'Falling-ball',
+    pageLink: './Art/Ornitcg/fallingBall/index.html',
+    imageLink: './Art/Ornitcg/fallingBall/ball1.gif',
+    author: 'Ornitcg',
+    githubLink: 'https://github.com/ornitcg'
+  },
+  {
+    artName: 'Shining-Stars',
+    pageLink: './Art/Ornitcg/Stars/index.html',
+    imageLink: './Art/Ornitcg/Stars/stars.gif',
+    author: 'Ornitcg',
+    githubLink: 'https://github.com/ornitcg'
+  },
   {
     artName: 'Circles',
     pageLink: './Art/AmanRawat/index.html',