View here: https://imvbh.github.io/FlipClock/
FlipClock is a web-based clock with a realistic flipping animation. It offers a clean and minimalist design with several key features:
- Smooth Flips: FlipClock achieves smooth flips by animating each digit's top and bottom halves separately.
- 12-Hour and 24-Hour Support: Easily toggle between 12-hour and 24-hour time formats.
- Toggle Seconds: Enable or disable the display of seconds on the clock.
- Day/Night Mode: The interface adapts to the time of day for optimal viewing.
- Fullscreen Mode: Double-tap for an immersive full-screen experience.
- Auto Hide Buttons: Buttons disappear after 2 seconds of inactivity for an uncluttered view.
FlipClock achieves smooth flips by animating the top and bottom halves of each digit separately. The flip function handles the animation of each digit by creating top and bottom flip elements and updating the displayed number.
- Include FlipClock JavaScript and CSS files in your HTML.
- Add a
<div>with the class "flip-card" to display the clock. - Customize the clock's appearance, buttons, and functionality as needed.
Feel free to contribute, open issues, or propose enhancements.
FlipClock is open-source make sure to give proper credits on usage.
Enjoy using FlipClock and elevate your web application's timekeeping experience!