/* * Valgfritt (opt-in) stilark for myke overganger mellom slides, bygget på * nettleserens native View Transitions API for ekte side-til-side- * navigasjon (cross-document) - ingen JavaScript involvert. * * Hvorfor "ekte side-til-side" og ikke den vanlige ett-fil-varianten? * Nettleseren kan kun starte en automatisk view transition ved en faktisk * dokumentnavigasjon (et nytt HTTP-svar/dokument lastes). :target-hopp i * samme dokument (standard-varianten i denne mappen, se slide.css) endrer * aldri dokumentet - det er derfor ingen "gammel"/"ny" side å ta bilde av, * og @view-transition-regelen under har ingen effekt der. Denne filen er * derfor kun ment for presentasjoner bygget som flere HTML-filer (én fil * per slide, forrige/neste-attributter på , se slide.js og * README.md for hvordan) - de aller fleste presentasjoner trenger ikke * dette, og lenker derfor ikke til denne filen i det hele tatt. * * Slik skrus det på, per presentasjon: * 1. Bygg presentasjonen som flere filer (én per fil). * 2. Lenk denne filen i : * 3. Velg en variant med data-attributtet på , f.eks. * * Uten steg 2 (denne filen lenket) skjer helt vanlig, umiddelbar side- * bytting - akkurat som i dag. Uten steg 3 (attributtet satt) brukes * nettleserens standard kryssfade automatisk så snart @view-transition * under er aktiv, siden "fade" nettopp er den oppførselen uten noen * tilpasning. Varianten "element" bygger videre på samme idé, men gir i * tillegg tittelen sin egen view transition slik at den kan flytte seg/ * endre størrelse som et delt element mellom to slides. * * Les mer: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API */ /* Slår på cross-document view transitions for denne siden. Skal stå i BEGGE dokumentene i en navigasjon (avgående og ankommende side) for at overgangen skal spilles av - i praksis alle filer i presentasjonen, siden de alle lenker til denne samme, delte filen. */ @view-transition { navigation: auto; } :root { /* Egen varighet for slide-overganger - lengre enn den globale --transition-duration (subtile hover/fokus-overganger), siden dette er en tydelig, helsides scenebytting som skal oppleves som en egen bevegelse. */ --slide-overgang-varighet: 400ms; } /* "fade" (kryssfade) er nettleserens standardoppførsel for ::view-transition-old(root)/::view-transition-new(root) uten noen tilpasning i det hele tatt - ingen egne regler trengs her. Verdien finnes likevel som et eksplisitt, gyldig valg (i stedet for å bare utelate attributtet) slik at det er tydelig i markupen at overgangen er et bevisst forfattervalg, ikke en tilfeldighet. */ /* "gli" - forrige slide glir ut mot venstre, neste glir inn fra høyre, som et horisontalt "scenebytte". */ html[data-slide-overganger="gli"] { &::view-transition-old(root) { animation: slides-gli-ut var(--slide-overgang-varighet) ease-in both; } &::view-transition-new(root) { animation: slides-gli-inn var(--slide-overgang-varighet) ease-out both; } } :root[data-slide-retning="tilbake"][data-slide-overganger="gli"] { &::view-transition-old(root) { animation: slides-gli-ut-tilbake var(--slide-overgang-varighet) ease-in both; } &::view-transition-new(root) { animation: slides-gli-inn-tilbake var(--slide-overgang-varighet) ease-out both; } } @keyframes slides-gli-ut { to { transform: translateX(-8%); opacity: 0; } } @keyframes slides-gli-inn { from { transform: translateX(8%); opacity: 0; } } @keyframes slides-gli-ut-tilbake { to { transform: translateX(8%); opacity: 0; } } @keyframes slides-gli-inn-tilbake { from { transform: translateX(-8%); opacity: 0; } } /* "zoom" - forrige slide krymper svakt og tones bort, neste vokser inn fra en anelse forstørret - en mer "dramatisk" scenebytting enn gli/fade. */ html[data-slide-overganger="zoom"] { &::view-transition-old(root) { animation: slides-zoom-ut var(--slide-overgang-varighet) ease-in both; } &::view-transition-new(root) { animation: slides-zoom-inn var(--slide-overgang-varighet) ease-out both; } } :root[data-slide-retning="tilbake"][data-slide-overganger="zoom"] { &::view-transition-old(root) { animation: slides-zoom-ut-tilbake var(--slide-overgang-varighet) ease-in both; } &::view-transition-new(root) { animation: slides-zoom-inn-tilbake var(--slide-overgang-varighet) ease-out both; } } @keyframes slides-zoom-ut { to { transform: scale(0.94); opacity: 0; } } @keyframes slides-zoom-inn { from { transform: scale(1.05); opacity: 0; } } @keyframes slides-zoom-ut-tilbake { to { transform: scale(1.05); opacity: 0; } } @keyframes slides-zoom-inn-tilbake { from { transform: scale(0.94); opacity: 0; } } /* "element" - behold nettleserens vanlige helside-kryssfade, men gi tittelen sin egen navngitte view transition slik at den kan morphes mellom to slides når begge sider har samme elementnavn. */ html[data-slide-overganger="element"] { & lm-slide-tittel h1 { /* view-transition-name må være unikt innenfor hvert enkelt dokument-snapshot, ikke globalt på tvers av hele decken. Siden denne presentasjonsmotoren bruker ekte side-til-side-navigasjon, sammenlignes kun to dokumenter om gangen (avgående + ankommende slide), så samme navn kan trygt gjenbrukes i alle slide-filene. */ view-transition-name: slide-tittel; } &::view-transition-group(root), &::view-transition-group(slide-tittel) { animation-duration: var(--slide-overgang-varighet); animation-timing-function: ease; } &::view-transition-old(root), &::view-transition-new(root), &::view-transition-old(slide-tittel), &::view-transition-new(slide-tittel) { animation-duration: var(--slide-overgang-varighet); } } /* Respekter redusert bevegelse - samme prinsipp som resten av /slides (se f.eks. --prototype-transition-duration i slide-prototype.css). ::view-transition-group(*) treffer alle overgangs-pseudoelementer, uavhengig av valgt variant. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation: none !important; } }