Databases
StackOverflow2013
Postsdbo
POCountdown flip effect without images
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCountdown flip effect without images
    primarykey
    data
    text
    <p>I'm trying to to animate a countdown with a flip effect with only text, but I can't figure out how to do it,this is what I have thought:</p> <ul> <li><p>Each section of countdown (days, hours, minutes, seconds) has got 4 div</p> <ul> <li>Upper current time</li> <li>Lower current time</li> <li>Upper next time</li> <li>Lower next time</li> </ul> <p>@@@@@<br/> @ Upper @<br/> @@@@@<br/> @ Lower @<br/> @@@@@</p></li> <li>Then I thought to display only half number of each div <ul> <li>the upper with <code>fixed heights</code> and <code>overflow:hidden</code> on the parent</li> <li>I have no idea to achive the same effect on the lower one<br/> <br/></li> </ul></li> <li>To animate I thought to shrink each part (upper->lower) of the <code>class='active'</code> div and update the otherone</li> <li>I have also some problem on how to reset the shrinked div</li> </ul> <p><br/><br/>Otherwise I thought to have always 4 divs in the same position and run 4 synced animations and 1 after, but I don't know if it possible to do and/or if them could cause some lag or flash" effect: </p> <ul> <li>First Layer: shrink the upper part, hide the lower part</li> <li>Second Layer(at the same time): hide the upper part</li> <li>Then shrink the lower section of the second layer </li> <li>Update(same <code>class='active'</code> way) and reset in some way</li> </ul> <p>I hope that you will understand and could explain me which one is better and suggest me how to solve the "blank" points<br/><br/> <strong>EDIT</strong> <br/><br/> <a href="http://jsfiddle.net/swYJ6/" rel="nofollow">JSFiddle</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRazorphyn
    1. USRazorphyn
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POCountdown flip effect without images
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you make a JSFiddle with the initial state?
      singulars
      1. POCountdown flip effect without images
      1. USjoews
    2. CO@joews I'm sorry, but at this moment I have only got a linear countdown, I preferred to have an idea on how to proceed before update the script, however if you need it I will do it
      singulars
      1. POCountdown flip effect without images
      1. USRazorphyn
    3. COIt will enable people to give you a better answer, even if it is just the non-animated html.
      singulars
      1. POCountdown flip effect without images
      1. USjoews
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload