More actions
No edit summary |
No edit summary |
||
| Line 7: | Line 7: | ||
** Initial mouse-over to Begin border expansion: 75ms | ** Initial mouse-over to Begin border expansion: 75ms | ||
** Begin border expansion to end border expansion: 100ms | ** Begin border expansion to end border expansion: 100ms | ||
** End border expansion to end image zooming: ~ | ** End border expansion to end image zooming: ~ 2820s | ||
* replicate expand (& zoom) behavior in CSS on-wiki | * replicate expand (& zoom) behavior in CSS on-wiki | ||
** Animations on ::hover, with keyframes for timing? | ** Animations on ::hover, with keyframes for timing? | ||
| Line 19: | Line 19: | ||
** Detail Text | ** Detail Text | ||
** Page-link | ** Page-link | ||
== Notes == | |||
Timings of hover & zoom, initial findings: | |||
~ 75ms after mousehover before border expansion begins<br> | |||
~ 100ms to accomplish border expansion<br> | |||
~ 2825s to finish zooming background image in after border expansion<br> | |||
Total: about 3 seconds (2825+100+75 = 3000ms) to accomplish the full sequence.<br> | |||
Keyframes triggered on ::hover<br> | |||
0 = resting state, lasts 75ms<br> | |||
1 = border fully expanded, background image also expanded same amount, lasts 100ms<br> | |||
2 = background image fully expanded, lasts 2825ms<br> | |||
Mouse-out resets state to 0.<br> | |||
For Mobile: <br> | |||
JS to switch target link, so first tap on card triggers the expansion & zoom, second tap goes to page? Is that intuitive enough, or would user expect second tap to shrink the card again? | |||
Revision as of 21:22, 18 July 2021
Project: Replace front page with Agency-like interface, CSS card system
First steps:
- Determine sizes (and zoom) levels of Agency cards in-game both before and after mouse-hover
- Determine expand (& zoom) timings from in-game
- Initial mouse-over to Begin border expansion: 75ms
- Begin border expansion to end border expansion: 100ms
- End border expansion to end image zooming: ~ 2820s
- replicate expand (& zoom) behavior in CSS on-wiki
- Animations on ::hover, with keyframes for timing?
Decide which size cards to use on the wiki
Templatize the cards so they can be used more easily
- Template variables:
- Image
- Title
- Detail Text
- Page-link
Notes
Timings of hover & zoom, initial findings:
~ 75ms after mousehover before border expansion begins
~ 100ms to accomplish border expansion
~ 2825s to finish zooming background image in after border expansion
Total: about 3 seconds (2825+100+75 = 3000ms) to accomplish the full sequence.
Keyframes triggered on ::hover
0 = resting state, lasts 75ms
1 = border fully expanded, background image also expanded same amount, lasts 100ms
2 = background image fully expanded, lasts 2825ms
Mouse-out resets state to 0.
For Mobile:
JS to switch target link, so first tap on card triggers the expansion & zoom, second tap goes to page? Is that intuitive enough, or would user expect second tap to shrink the card again?