Samenvatting
Een overgang laat een verandering tussen twee statussen vloeiend verlopen in plaats van plotseling. Denk aan een knop die bij aanwijzen langzaam van kleur wisselt.
Je stelt per opmaakeigenschap een eigen vertraging, duur en verloop in. De eenheid is altijd milliseconden.
Overgangen staan op het tabblad Overgangen. Dat tabblad bestaat alleen bij een element met minstens een tweede status.
Wanneer gebruik je dit?
Je gebruikt dit als een verandering bij aanwijzen te hard aanvoelt. Een knop die in een keer omslaat naar een andere kleur, oogt onrustig.
Je gebruikt het ook voor een zichtbare focus. Wie met het toetsenbord door je website loopt, ziet dan zacht waar hij staat.
En je gebruikt het bij het menu-item van de pagina waar de bezoeker nu is. Dat item mag rustig oplichten.
Wil je een element laten bewegen zodra het in beeld scrollt, dan is dat iets anders. Lees Effect kiezen.
Hoe werkt dit in Mach3Blocks?
Je selecteert een element en opent rechts het instellingenpaneel. Daar staat het tabblad Overgangen naast Opmaak.
Een overgang werkt altijd tussen twee statussen. Zet je nergens een afwijkende waarde, dan is er niets om vloeiend te maken.
De statussen van een element
De statustabbladen staan op het tabblad Opmaak, boven de opmaakvelden. Zij bepalen welke waarde je bewerkt.
Klik je op een status en wijzig je daar een waarde, dan geldt die waarde alleen in die status.
| Status | Wanneer het geldt | Bijzonderheden |
|---|---|---|
| Standaard | hoe je element er normaal uitziet | het vertrekpunt van elke overgang |
| Mouseover | als de bezoeker er met de muis overheen gaat | bestaat niet op een aanraakscherm |
| Focus | als je element via het toetsenbord is aangewezen | |
| Actief | bij het huidige of ingedrukte onderdeel | bijvoorbeeld het menu-item van de pagina waar je bent |
| Error | bij een fout ingevulde invoer | hoort bij je formulieren |
| Uitgeschakeld | als een onderdeel niet beschikbaar is | alleen bij twee soorten control |
Welke statussen je ziet, hangt af van wat je hebt geselecteerd. Dat ligt vast per soort.
| Wat je selecteert | Welke statussen erbij horen |
|---|---|
| Kolom, box, card, heading, tekst, scheiding | Standaard en Mouseover |
| Tekstlink, media, icoon | Standaard, Mouseover en Focus |
| Handler | Standaard, Mouseover en Actief |
| Button, menulink | Standaard, Mouseover, Focus en Actief |
| Control | Standaard, Mouseover en Focus, met Actief of Uitgeschakeld erbij |
| Pagina, blok, container, rij, nummer, menu, iframe, Maps-element, viewport | geen |
De laatste regel verklaart de meest gestelde vraag over dit tabblad. Zonder statussen is er geen overgang, en dus ook geen tabblad.
Wat er op het tabblad Overgangen staat
Bovenaan staat het opmaakniveau waarop je werkt, met dezelfde niveaus als bij je opmaakvelden. Lees Opmaakniveaus.
Ernaast staat een blauwe plusknop met de naam Overgang toevoegen. Daarnaast staat het meer-menu boven de overgangen.
Dat menu heeft een optie: Overgangen resetten. Die optie is grijs zolang er op dit niveau geen eigen overgang staat.
Werk je in het thema, dan is er geen niveauveld en geen meer-menu. Daar staat alleen de plusknop.
Hoe een ingestelde overgang eruitziet
Een overgang staat in de lijst onder de naam van zijn eigenschap, met de groep ervoor. Een overgang op je achtergrondkleur leest dus als Achtergrond: Kleur.
Daaronder staat een bijschrift met je drie waarden achter elkaar, in de volgorde vertraging, duur en timing. Zo'n bijschrift leest bijvoorbeeld als 0ms, 250ms, Vloeiend.
Een overgang die je op dit niveau zelf hebt gezet, heeft de knoppen Bewerken en Verwijderen. Een geërfde overgang heeft die knoppen niet.
De vier velden van de pop-in
De plusknop opent de pop-in Overgang toevoegen. Bij bewerken heet diezelfde pop-in Overgang bewerken.
Bovenin staat een meldingsblok dat uitlegt waartussen de overgang loopt. Daaronder staan vier velden.
| Veld | Soort | Waarden | Bijzonderheden |
|---|---|---|---|
| Eigenschap | keuzelijst met zoekvak | de eigenschappen van dit element, gegroepeerd op hun groep | verplicht. De lijst verschilt per element, van elf tot vijfenveertig keuzes |
| Vertraging | getal in milliseconden | vanaf 0, geen bovengrens | leeg betekent 0 |
| Duur | getal in milliseconden | vanaf 0, geen bovengrens | leeg betekent 0, en dan beweegt er niets |
| Timing | keuzelijst | vijf verlopen, zie de tabel hieronder | standaard Vloeiend |
Vier namen in die keuzelijst staan niet op het tabblad Opmaak. Zij bundelen een hele familie in een keuze, zoals de schaal, de rotatie en de verplaatsing samen.
Je laat die drie dus altijd samen overlopen, niet los van elkaar.
De vijf verlopen van het veld Timing
| Timing | Hoe het verloopt |
|---|---|
| Vloeiend | de standaardkeuze, met een zacht verloop |
| Vloeiend-in | begint langzaam en versnelt naar het einde |
| Vloeiend-uit | begint snel en vertraagt naar het einde |
| Vloeiend-in-uit | begint langzaam en eindigt langzaam |
| Lineair | dezelfde snelheid van begin tot eind, zonder versnellen |
Stappenplan
Een overgang toevoegen
- Open je website in de editor.
- Selecteer je element in het canvas.
- Open het tabblad Opmaak.
- Klik bovenaan op de status waarin je wilt afwijken, bijvoorbeeld Mouseover.
- Wijzig daar de waarde die moet veranderen, bijvoorbeeld je achtergrondkleur.
- Open het tabblad Overgangen.
- Controleer het opmaakniveau bovenaan.
- Klik op de plusknop Overgang toevoegen.
- Kies je eigenschap in het veld Eigenschap.
- Vul een aantal milliseconden in bij Duur.
- Vul eventueel een wachttijd in bij Vertraging.
- Kies een verloop in het veld Timing.
- Klik op Toevoegen.
Een overgang wijzigen
- Open het tabblad Overgangen bij je element.
- Klik op de knop Bewerken op de regel van je overgang.
- Wijzig de waarden die je anders wilt.
- Klik op Opslaan.
Een overgang weghalen
- Open het tabblad Overgangen bij je element.
- Klik op de knop Verwijderen op de regel van je overgang.
- Bevestig het verwijderen.
Voorwaarden en rechten
Je hebt het recht Websites/presentaties stijlen nodig. Zonder dat recht staat het tabblad Overgangen er niet.
Voor het toevoegen, wijzigen en weghalen zelf is geen apart recht nodig. Wie het tabblad ziet, kan die drie dingen doen.
Welke rol dit recht standaard heeft, staat in Thema uitgelegd.
Op je live website verschijnt je overgang pas nadat je opnieuw publiceert.
Gevolgen en beperkingen
Een overgang op zichzelf verandert niets aan hoe je element eruitziet. Hij bepaalt alleen hoe hard de sprong tussen twee statussen is.
Staat Duur op 0 of leeg, dan is die sprong nog even hard als zonder overgang.
| Wat je wilt | Kan het |
|---|---|
| Een overgang bij een blok, een container of een rij | Nee, die hebben geen statussen |
| Meer dan een overgang op hetzelfde element | Ja, een per eigenschap |
| De schaal los van de verplaatsing laten overlopen | Nee, die gaan samen in een keuze |
| Een andere duur per schermgrootte | Nee, er is geen schermgrootteknop op dit tabblad |
| Een geërfde overgang hier wijzigen | Nee, dat gaat op het niveau waar hij staat |
| Seconden invullen in plaats van milliseconden | Nee, de eenheid staat vast |
Een geërfde overgang staat wel in je lijst, maar zonder knoppen. Wil je hem wijzigen, ga dan naar het niveau waar hij is gezet.
Als het niet lukt
Zie je het tabblad Overgangen niet, dan heeft je selectie geen tweede status. Selecteer het element zelf en niet het blok eromheen.
Verandert er bij aanwijzen niets, controleer dan de status Mouseover op het tabblad Opmaak. Zonder afwijkende waarde daar gebeurt er niets.
Springt de verandering nog steeds hard, dan staat je overgang op een andere eigenschap dan de waarde die je hebt gewijzigd.
Beweegt er helemaal niets, kijk dan naar Duur. Een leeg veld en een 0 geven hetzelfde resultaat.
Vind je je eigenschap niet in de keuzelijst, dan hoort zij niet bij dit soort element. Een button heeft de langste lijst.
Zie je geen knop Bewerken bij een overgang, dan komt die overgang van een hoger niveau.
Is Overgangen resetten grijs, dan staat er op dit niveau geen eigen overgang om weg te halen.