Flip Clock with Animation
Created
September 24, 2024 20:06
-
-
Save chonsser/97e6e92f9aacd95a978b5f0f80fc480a to your computer and use it in GitHub Desktop.
Flip Clock with Animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Flip Clock with Animation</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="flip-clock"> | |
| <div class="flip" id="hours-1"> | |
| <div class="upper">0</div> | |
| <div class="lower">0</div> | |
| </div> | |
| <div class="flip" id="hours-2"> | |
| <div class="upper">0</div> | |
| <div class="lower">0</div> | |
| </div> | |
| <span>:</span> | |
| <div class="flip" id="minutes-1"> | |
| <div class="upper">0</div> | |
| <div class="lower">0</div> | |
| </div> | |
| <div class="flip" id="minutes-2"> | |
| <div class="upper">0</div> | |
| <div class="lower">0</div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function startFlipClock() { | |
| function updateDigit(element, newValue) { | |
| const upper = element.querySelector('.upper'); | |
| const lower = element.querySelector('.lower'); | |
| const currentValue = upper.textContent; | |
| if (currentValue !== newValue) { | |
| upper.textContent = currentValue; // Keep the current value | |
| lower.textContent = newValue; // Set the new value | |
| element.classList.add('animate'); // Trigger the animation | |
| setTimeout(() => { | |
| upper.textContent = newValue; // After the flip, update the upper text | |
| element.classList.remove('animate'); // Reset the animation state | |
| }, 600); // Match with the animation duration | |
| } | |
| } | |
| function updateFlipClock() { | |
| const now = new Date(); | |
| const hours = String(now.getHours()).padStart(2, '0'); | |
| const minutes = String(now.getMinutes()).padStart(2, '0'); | |
| const seconds = String(now.getSeconds()).padStart(2, '0'); | |
| // Update each digit | |
| updateDigit(document.getElementById('hours-1'), hours[0]); | |
| updateDigit(document.getElementById('hours-2'), hours[1]); | |
| updateDigit(document.getElementById('minutes-1'), minutes[0]); | |
| updateDigit(document.getElementById('minutes-2'), minutes[1]); | |
| updateDigit(document.getElementById('seconds-1'), seconds[0]); | |
| updateDigit(document.getElementById('seconds-2'), seconds[1]); | |
| } | |
| setInterval(updateFlipClock, 1000); | |
| } | |
| window.onload = startFlipClock; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background-color: #333; | |
| font-family: 'Arial', sans-serif; | |
| } | |
| .flip-clock { | |
| display: flex; | |
| font-size: 4rem; | |
| color: #fff; | |
| } | |
| .flip { | |
| position: relative; | |
| perspective: 1000px; | |
| margin: 0 5px; | |
| } | |
| .flip .upper, | |
| .flip .lower { | |
| background-color: #444; | |
| padding: 20px; | |
| border-radius: 10px; | |
| text-align: center; | |
| width: 60px; | |
| display: block; | |
| } | |
| .flip .lower { | |
| transform: rotateX(90deg); | |
| transform-origin: center; | |
| } | |
| .flip.animate .lower { | |
| animation: flip 0.6s forwards; | |
| } | |
| .flip .upper { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| @keyframes flip { | |
| 0% { | |
| transform: rotateX(90deg); | |
| } | |
| 100% { | |
| transform: rotateX(0deg); | |
| } | |
| } | |
| span { | |
| color: #fff; | |
| font-size: 4rem; | |
| padding: 10px; | |
| } | |
| .developer-linkedin{ | |
| position: absolute; | |
| margin: auto; | |
| right: 15px; | |
| bottom: 15px; | |
| background: #fff; | |
| padding: 5px 10px; | |
| border-radius: 15px 1px; | |
| } | |
| .developer-linkedin a{ | |
| text-decoration: none; | |
| color: #000; | |
| text-shadow: 0 0 #fff504; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment