-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
6 additions
and
6 deletions.
There are no files selected for viewing
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
#[Flip Clock](https://dkallen78.github.io/clocks/flip-clock/flip-clock.html) | ||
# [Flip Clock](https://dkallen78.github.io/clocks/flip-clock/flip-clock.html) | ||
|
||
After having made some analog clocks, I wanted to see if I could make a classic flip clock. The concept is pretty simple but it took some work to get all the HTML and CSS to play nicely together. The trick is to use two elements to display the proper digit, one each for the top and bottom. Then I use clip-path to trim off the bottom and top of the top and bottom respectively. When it's time to change a time, I rotate the top part around the x axis with a 400 ms transition time, then halfway through the animatioin (when it's edge on/practically invisible) I sneak in the new digits so it looks like the back of the old digit is the bottom of the new one. |
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
#[Fraction Clock](https://dkallen78.github.io/clocks/fraction-clock/fractionClock.html) | ||
# [Fraction Clock](https://dkallen78.github.io/clocks/fraction-clock/fractionClock.html) | ||
|
||
Time is essentially just a representation of the fraction of the day that has passed. I decided to make a clock that represented that as a series of nested fractions using the MathML functionality built into the browser. The code in this one is stupid simple but getting my head around how to use the `<math>` tags took me a little bit. |
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
#[Neon Pixel Clock](https://dkallen.github.io/clocks/neon-pixel-1/neonPixel1.html) | ||
# [Neon Pixel Clock](https://dkallen.github.io/clocks/neon-pixel-1/neonPixel1.html) | ||
|
||
My original plan was to make a seven-segment display clock but I went for the easy solution and made a 15-pixel display clock instead. There's nothing tricky here as far as programming goes. The numbers are defined in a 3x5 array with 1s and 0s representing active and inactive "pixels." Everything is arranged in the DOM with a grid box. |
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
#[Spin Clock](https://dkallen78.github.io/clocks/spin-clock/spinClock.html) | ||
# [Spin Clock](https://dkallen78.github.io/clocks/spin-clock/spinClock.html) | ||
|
||
After my [Flip Clock](https://dkallen78.github.io/clocks/flip-clock) I wanted to explore 3D CSS transformations a bit more. Whereas the Flip Clock rotates elements along the X axis with the rotation origin in the center of the element, this clock moves that origin in 3D space 5rem into the virtual depth of the screen. Just before the number is spun out of site, the new number is made and placed in the DOM behind the old number. |
This file contains 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
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
#[Twist Clock](https://dkallen78.github.io/clocks/twist-clock/twistClock.html) | ||
# [Twist Clock](https://dkallen78.github.io/clocks/twist-clock/twistClock.html) | ||
|
||
The only new thing I'm doing here that I didn't do in either the [Flip Clock](https://dkallen78.github.io/clocks/flip-clock) or the [Spin Clock](https://dkallen78.github.io/clocks/spin-clock) is have upcoming and previous digits displayed along with the current count of seconds. More than anything, this clock was an exercise in turning an idea into a reality. |