/* ═══════════════════════════════════════════════════════════════════ ŽIVÁ SCÉNA U MICROSOFTU — prefix nova- a scena-. Příkaz č. 183. Jiří 25. 8.: „Recruitis má na webu interaktivní screenshoty, kde se pohybuje kurzor… ať tam u kalendáře vyskakuje okno přidání události a uložit, a u druhého teams hovor." ŽÁDNÝ KURZOR. Je to rozhodnutí, ne opomenutí — a stojí na tom, co je napsané o dva odstavce níž v téže buňce: „Termín v Outlooku i odkaz na Teams video vznikají ZCELA SAMY" a „0 KLIKNUTÍ NAVÍC". Animovaná myš, která objíždí rozhraní a klikáá, je ukázka ČLOVĚKA, KTERÝ PRACUJE. Předváděli bychom opak toho, co tvrdíme. Proto se hýbe systém, ne ukazatel myši. ⛔ VÝCHOZÍ STAV JE HOTOVÝ OBRÁZEK, NE PRÁZDNÁ SCÉNA. Bez JavaScriptu, bez animace i s vypnutým pohybem vypadá scéna přesně jako předtím: událost v kalendáři je vidět, panel Teams stojí na místě, okénko „Nová událost" je průhledné a nezabírá místo. Animace NIC NESKRÝVÁ — jen ukáže, jak ten obrázek vznikl, a vrátí ho do výchozí podoby. Kdo si vypne pohyb, nepřijde o informaci, jen o představení. HRAJE SE JEDNOU, PŘI DOSCROLLOVÁNÍ (assets/js/scena.js), ne ve smyčce. Smyčka v periferním vidění je zloděj pozornosti a po třetím průběhu je z ní šum. ═══════════════════════════════════════════════════════════════════ */ /* ── Okénko „Nová událost" ────────────────────────────────────────── Sedí nad kalendářem vpravo nahoře, kde je v okně nejvíc klidu — pod ním jsou jen řádky 8:30 a 9:15. Perspektivu dědí po scéně a naklonění má stejné jako okno, aby leželo NA něm, ne vedle. */ .ms-banner .nova { position: absolute; right: 2%; top: 6px; width: min(268px, 46%); z-index: 4; padding: 11px 13px 12px; border: 1px solid var(--ms-linka); border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 40px -14px rgba(15, 23, 42, .3); transform: rotateX(2deg) rotateY(-3deg); /* VÝCHOZÍ STAV: neviditelné a neklikací. Viz varování výš. */ opacity: 0; pointer-events: none; } .ms-banner .nova-hl { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--ms-linka); } .ms-banner .nova-hl b { font-size: 11.5px; font-weight: 750; color: var(--ms-text); } .ms-banner .nova-tec { width: 7px; height: 7px; border-radius: 50%; background: #E2E8F0; } .ms-banner .nova-radek { display: flex; align-items: center; gap: 9px; padding: 4px 0; min-height: 22px; } .ms-banner .nova-stitek { flex: 0 0 34px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; } .ms-banner .nova-hod { font-size: 11.5px; color: var(--ms-text); line-height: 1.35; white-space: nowrap; overflow: hidden; } /* Název se „píše": maskou zprava, ne po písmenech. Psaní po písmenech se dělá měněním textu a to je práce pro JavaScript; tohle je jedna vlastnost a vypadá stejně. */ .ms-banner .nova-pise { max-width: 100%; } /* Přepínač Teams. V klidu vypnutý — zapne ho animace, protože právě tohle je ta věta pod scénou: odkaz na Teams vzniká sám. */ .ms-banner .nova-prep { position: relative; display: inline-block; width: 30px; height: 17px; border-radius: 9px; background: #E2E8F0; transition: background .2s ease; } .ms-banner .nova-prep i { position: absolute; top: 2.5px; left: 2.5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .25); } .ms-banner .nova-ulozit { display: block; margin-top: 10px; padding: 7px 0; text-align: center; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7C3AED, #9333EA); border-radius: 9px; } /* ═══ PŘEDSTAVENÍ ═══════════════════════════════════════════════════ Třídu .hraje přidává scena.js, když se scéna dostane do zorného pole. Bez ní se nic z tohohle neuplatní. ČASOVÁ OSA (celkem 4,6 s): 0,0–0,45 okénko naskočí 0,5–1,5 název se dopíše 1,5–1,9 čas naskočí 1,9–2,3 přepínač Teams se zapne 2,3–2,7 Uložit se stiskne 2,7–3,1 okénko zmizí 2,9–3,4 událost dosedne do kalendáře na 9:15 3,4–4,6 panel Teams přijede a hovor běží 3,9–4,5 rukopis doplave k němu ═════════════════════════════════════════════════════════════════ */ .ms-banner .scena.hraje .nova { animation: nova-okno 3.1s ease forwards; } .ms-banner .scena.hraje .nova-pise { animation: nova-psani .95s .5s ease forwards; } .ms-banner .scena.hraje .nova-kdy { animation: nova-vjezd .4s 1.5s ease backwards; } .ms-banner .scena.hraje .nova-prep { animation: nova-zapnuti .4s 1.9s ease forwards; } .ms-banner .scena.hraje .nova-prep i { animation: nova-jezdec .4s 1.9s ease forwards; } .ms-banner .scena.hraje .nova-ulozit { animation: nova-stisk .4s 2.3s ease; } .ms-banner .scena.hraje .scena-novy { animation: nova-dosedne .5s 2.9s ease backwards; } .ms-banner .scena.hraje .teams { animation: nova-teams 1.2s 3.4s cubic-bezier(.2,.7,.3,1) backwards; } .ms-banner .scena.hraje .zive i { animation: nova-tep 1.4s 4.2s ease-in-out 3; } /* Rukopis přijde AŽ S PANELEM, který popisuje. Šipka mířila první tři a půl vteřiny do prázdna — popisek bez toho, co popisuje, je jen čmáranice. */ .ms-banner .scena.hraje .rukopis { animation: nova-vjezd .6s 3.9s ease backwards; } @keyframes nova-okno { 0% { opacity: 0; transform: rotateX(2deg) rotateY(-3deg) translateY(-8px) scale(.96); } 14% { opacity: 1; transform: rotateX(2deg) rotateY(-3deg) translateY(0) scale(1); } 87% { opacity: 1; transform: rotateX(2deg) rotateY(-3deg) translateY(0) scale(1); } 100% { opacity: 0; transform: rotateX(2deg) rotateY(-3deg) translateY(-6px) scale(.97); } } @keyframes nova-psani { from { max-width: 0; } to { max-width: 100%; } } @keyframes nova-vjezd { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes nova-zapnuti { to { background: #7C3AED; } } @keyframes nova-jezdec { to { transform: translateX(13px); } } @keyframes nova-stisk { 50% { transform: scale(.95); filter: brightness(.9); } 100% { transform: none; filter: none; } } /* Událost nedosedne shora ani zdola — vyjede z místa, kde stálo okénko, tedy zprava. Aby bylo vidět, že tam přišla ODTUD. */ @keyframes nova-dosedne { 0% { opacity: 0; transform: translateX(16px) scale(.98); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes nova-teams { 0% { opacity: 0; transform: rotateX(2deg) rotateY(-3deg) translate(26px, 14px) scale(.96); } 100% { opacity: 1; transform: rotateX(2deg) rotateY(-3deg) translate(0, 0) scale(1); } } @keyframes nova-tep { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } } /* ── VYPNUTÝ POHYB ────────────────────────────────────────────────── Nic se nehýbe a nic nechybí: výchozí stav JE hotový obrázek. Stačí tedy animace neposkytnout. */ @media (prefers-reduced-motion: reduce) { .ms-banner .scena.hraje .nova, .ms-banner .scena.hraje .nova-pise, .ms-banner .scena.hraje .nova-kdy, .ms-banner .scena.hraje .nova-prep, .ms-banner .scena.hraje .nova-prep i, .ms-banner .scena.hraje .nova-ulozit, .ms-banner .scena.hraje .scena-novy, .ms-banner .scena.hraje .teams, .ms-banner .scena.hraje .zive i, .ms-banner .scena.hraje .rukopis { animation: none; } } /* ── ÚZKÉ OKNO ────────────────────────────────────────────────────── Pod 560 px je okno kalendáře tak úzké, že by okénko zakrylo celý den. Představení se tam nehraje — scéna zůstane hotovým obrázkem. Je to lepší než animace, ve které není co vidět. */ /* ⛔ DVA RŮZNÉ DŮVODY = DVA RŮZNÉ ZLOMY. Do 27. 8. to byl jeden blok na 560 px. Rozdělil ho příkaz č. 188: panel Teams od 640 px dolů sesedá do toku pod kalendář (msnahledy.css), a prvek, který stojí v toku, nemá přijíždět zprava — nájezd nova-teams posouvá o translate(26px, 14px) a vypadalo by to, že uklouzl. Okénko „Nová událost" ZŮSTÁVÁ na 560 a nehýbe se s tím: jeho důvod je jiný — pod 560 px je okno kalendáře tak úzké, že by okénko zakrylo celý den. Při 600 px má okno 415 px a okénko se tam vejde. Sloučit ty dva zlomy jen proto, že jsou blízko, by znamenalo, že za měsíc nikdo nepozná proč. */ @media (max-width: 640px) { .ms-banner .scena.hraje .scena-novy, .ms-banner .scena.hraje .teams, .ms-banner .scena.hraje .rukopis { animation: none; } } @media (max-width: 560px) { .ms-banner .nova { display: none; } }