Difference between revisions of "User:Rayanth/FrontpageNotes"
| Line 10: | Line 10: | ||
* 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? | ||
| + | * Determine what Topics/Categories (and how many total) will be represented | ||
| + | ** Musts: | ||
| + | *** EVE University | ||
| + | *** UniWiki (how to contribute, etc.) | ||
Decide which size cards to use on the wiki | Decide which size cards to use on the wiki | ||
| Line 22: | Line 26: | ||
== Notes == | == Notes == | ||
Timings of hover & zoom, initial findings: | Timings of hover & zoom, initial findings: | ||
| − | ~ 75ms after | + | ~ 75ms after mouse-hover before border expansion begins<br> |
~ 100ms to accomplish border expansion<br> | ~ 100ms to accomplish border expansion<br> | ||
~ 2825s to finish zooming background image in after border expansion<br> | ~ 2825s to finish zooming background image in after border expansion<br> | ||
Revision as of 21:31, 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?
- Determine what Topics/Categories (and how many total) will be represented
- Musts:
- EVE University
- UniWiki (how to contribute, etc.)
- Musts:
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 mouse-hover 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?
