Its 'top' property has to be the height of '.flip-clock-wrapper ul' divided by 2 minus its own height divided by 2. '.flip-clock-wrapper ul li a div.up:after' represents the line between the top and bottom parts of the flip. Ive reduced the border radius' of '.flip-clock-wrapper ul li a div div.inn' and '.flip-clock-wrapper ul li a div.down' for aesthetics. The actual number inside the box is represented by '.flip-clock-wrapper ul li a div div.inn' so I have adjusted the font size here. The line-height of '.flip-clock-wrapper ul li' should match the height of '.flip-clock-wrapper ul'. The '.flip-clock-wrapper ul' properties represent each digit's containing box. I know its nearly a year old, but here is the manual solution (its really not '1000 css defaults'): In the flipclock.css file i think you may need to have this on. FlipClock.js is a proper abstract object oriented clock and counter library with a realistic flip effect. webkit-transform: scale(.54) / Safari and Chrome / Even the HTML gets embedded through JavaScript. Seems to work fine in Chrome/Safari (Firefox still moves, maybe developer could modify some internal css) but haven't tested in anything else. There is a bit of CSS for styling but the entire animation setup and the structure all runs on JavaScript. 55 or any other odd number the flips move a little bit. So here’s a really interesting project that features a flipping countdown running in pure JS. Preview will be at homepage for a while and then will be moved inside projects, titled 'embarrasing'. See the Pen Flip Clock & Countdown by Shaw on CodePen. I found if i reduced the width below the original size of clock it messed up.įudged it a little by having negative margin, but might help someone get it going or improve on scaling css. ![]() 55 or any other odd number the flips move a little bit.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |