Modified Pendulum, added oscillaation speed control slider (#425)

* Modified Pendulum, added slided to control the oscillaation speed * Delete Pendulum/script.js * Update index.html * Add files via upload * Update README.md
you-dont-need · Oct 31, 2023 · 7a1250d · 7a1250d
1 parent 198b1eb
commit 7a1250d
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 21 deletions.
diff --git a/Pendulum/index.html b/Pendulum/index.html
@@ -4,10 +4,17 @@
     <link rel="stylesheet" type="text/css" href="pendulum.css">
 </head>
 <body>
-    <div class="pendulum">
-        <div class="bell">
-            <div class="clapper"></div>
+    <div class="pendulum-container">
+        <div class="pendulum">
+            <div class="bell">
+                <div class="clapper"></div>
+            </div>
         </div>
     </div>
+    <div class="speed-slider-container">
+        <label for="speed-slider">Oscillation Speed:</label>
+        <input type="range" id="speed-slider" min="0.1" max="2" step="0.1" value="1">
+        <span id="speed-value">1</span>
+    </div>
 </body>
 </html>
diff --git a/Pendulum/pendulum.css b/Pendulum/pendulum.css
@@ -1,24 +1,32 @@
 body {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
     margin: 0;
+    background-color: #222;
+}
+
+.pendulum-container {
+    display: flex;
+    align-items: center;
 }
 
 .pendulum {
-    width: 10px;
-    height: 200px;
+    width: 20px; /* Larger pendulum (two times) */
+    height: 400px; /* Larger pendulum (two times) */
     background-color: #222;
     position: relative;
-    border-radius: 5px;
+    border-radius: 10px;
     transform-origin: top center;
-    animation: swing 2s infinite ease-in-out;
+    animation: swing 1s infinite alternate;
+    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.7); /* Enhanced shadow */
 }
 
 .bell {
-    width: 50px;
-    height: 50px;
+    width: 120px; /* Larger bell (two times) */
+    height: 120px; /* Larger bell (two times) */
     background-color: #777;
     border-radius: 50%;
     position: absolute;
@@ -27,28 +35,46 @@ body {
     transform: translateX(-50%);
     display: flex;
     justify-content: center;
-    align-items: flex-start;
-    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
+    align-items: center;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
 }
 
 .clapper {
-    width: 5px;
-    height: 60px;
+    width: 16px; /* Wider clapper */
+    height: 140px; /* Longer clapper */
     background-color: #444;
-    border-radius: 5px;
+    border-radius: 10px;
     transform-origin: 50% 0;
     position: relative;
-    animation: swing 2s infinite ease-in-out;
+    animation: swing 1s infinite alternate;
+}
+
+.speed-slider-container {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.speed-slider-container label {
+    color: #fff;
+    font-size: 16px;
+    margin-right: 10px;
 }
 
+.speed-slider-container input {
+    width: 150px;
+}
+
+.speed-slider-container #speed-value {
+    color: #fff;
+    font-size: 16px;
+    display: inline-block;
+    margin-left: 10px;
+}
 @keyframes swing {
-    0% {
-        transform: rotate(0deg);
+    0%, 100% {
+        transform: rotate(-20deg);
     }
     50% {
-        transform: rotate(10deg);
-    }
-    100% {
-        transform: rotate(0deg);
+        transform: rotate(20deg);
     }
 }
diff --git a/README.md b/README.md
@@ -67,6 +67,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 - [Neon Card](#neon-card)
 - [Neumorphism Card Design](#neumorphism-card-design)
 - [Parallax scrolling](#parallax-scrolling)
+- [Pendulum](#Pendulum)
 - [Playing Card Animation](#playing-card-animation)
 - [Responsive Counter Showing # of Items That Didn't Fit Screen](#responsive-counter-showing--of-items-that-didnt-fit-screen)
 - [Ripple Effect](#ripple-effect)
@@ -172,6 +173,16 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 
 &nbsp;
 
+## <a id="Flip"></a>Flip on click
+
+[<img src="images/pendulum.png" height="230" title="Pendulum Animation Demo">](https://codepen.io/TAPAS-SINGHAL/pen/ZEwOGjj)
+
+**[⬆ back to top](#quick-links)**
+
+---
+
+&nbsp;
+
 
 ## <a id="Animated Box"></a>Animated Box
 

diff --git a/images/pendulum.png b/images/pendulum.png