search

iliran11 / typing-game-2

2 stars 0 forks source link

Animation to timer #32

Open iliran11 opened 5 years ago

iliran11 commented 5 years ago
  1. before user starts typing - show a clock
  2. after user is typing - transition the clock to the current typing timer (shows number of seconds)
  3. current timer should also have the label "secs"
Alexander4788 commented 5 years ago

@iliran11 Changes in characterization:

  1. When the user enters the page, a second (1000/1500ms) after the page loads, the tooltip appears by *Fading in** (this tooltip staying there until the user start typing)
  2. The marker (this green cursor that surrounding the letter) blink until the user start typing (animation: fade in for 1000ms and fadeout for 500ms repittly)
  3. when the user type his first key: A. The tooltip Fading out B. The The clock and content inside it grew X1.3 to one sec and then shrinking to normal size (56px in web/ 48px in mobile) "like heartbeat"
  4. When the clock reaches the last 10 seconds, the color of the clock changes
  5. After the countdown ends, the loading appears for 3 sec - SVG: https://loading.io/spinner/custom/252257/

typing test

Typing test Mobille> Typing test web https://ar3x63.axshare.com (prototype)