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? | |||