-
Mijn naam is Lucas
en ik ben engineer voor
-
Google Web Designer.
-
In deze video gaan we
verder in op eerdere video's
-
over het maken van responsieve
documenten met mediaregels.
-
Deze video laat zien hoe u
animaties en mediaregels kunt combineren.
-
We beginnen met
een eenvoudig document dat
-
een verticale indeling heeft
wanneer het kijkvenster smal is
-
en een horizontale indeling
wanneer het kijkvenster breder is.
-
Ik breid dit document nu uit
-
zodat wanneer het
een horizontale indeling heeft
-
en het hoog genoeg is, er niet
-
één maar twee afbeeldingen
worden weergegeven. Ze zijn eerst
-
over elkaar gelegd en worden dan
van elkaar gescheiden met een animatie.
-
Aangezien Web Designer gebruikmaakt van
-
CSS3-sleutelframes voor animaties,
-
kan dit worden gecodeerd met mediaregels.
-
Ik schakel eerst over naar de hoofdcontent.
-
En ik kopieer en plak deze afbeelding.
-
Dan verwijs ik in een nieuwe
afbeelding naar een ander item.
-
En dat doe ik door
het pad van het item te wijzigen.
-
Ik laat dit standaard verborgen.
-
Nu ga ik terug naar mediaregels.
-
En ik voeg een breakpoint voor hoogte toe.
-
We kunnen zien dat we
het grotere bereik aan hoogten bewerken.
-
Ik voeg nu een sleutelframe toe
-
voor elk van die twee afbeeldingen.
-
Ik verplaats ze verticaal
met de transformatietool.
-
zoals hier.
-
Ten slotte pas ik
de instelling van de tweede afbeelding aan
-
zodat deze weer zichtbaar wordt.
-
Nu kan ik het voorbeeld
van de animatie doorlopen.
-
Deze animatie is responsief omdat
-
de twee afbeeldingen
samen gecentreerd blijven
-
terwijl het formaat
van het kijkvenster verandert.
-
Als ik echter van deze
mediaregel naar een andere ga,
-
verdwijnt de animatie.
-
U kunt dit zien op de tijdlijn, waar
-
alle tracks leeg zijn, behalve voor de
-
mediaregel rechtsonder.
-
Stel nu dat ik een
standaardanimatie wil hebben, waarbij
-
deze afbeelding overgaat van
een transparantie van 0 naar een van 1.
-
Hiervoor voeg ik in de hoofdregels
-
een sleutelframe in.
-
Voor de basistransparantie stel ik 0 in.
-
En bij het sleutelframe
stel ik de transparantie in op 1.
-
In de hoofdcontent zien we
dat de afbeelding langzaam in beeld komt.
-
Als we teruggaan naar de mediaregels,
-
zien we dat voor elke mediaregel
-
dezelfde animatie plaatsvindt.
-
Dat is de eerste,
-
daar is de tweede
-
en ten slotte de derde.
-
De enige uitzondering
is de mediaregel rechtsonder
-
waar ik een overschrijvende
animatie heb gedefinieerd.
-
Het enige dat we moeten aanpassen,
-
is dat we de basistransparantie
voor die eerste afbeelding
-
hebben ingesteld op 0.
-
We wijzigen dit weer in 1.
-
Nu functioneert de animatie weer.
-
U kunt altijd controleren
of u een animatie heeft
-
die de mediaregel heeft overschreven,
omdat het bijbehorende label
-
op de tijdlijn wordt gemarkeerd.
-
Als u op dit label klikt,
wordt een pop-up
-
weergegeven waarmee u de
overschrijvende animatie kunt verwijderen
-
zodat alleen de standaardanimatie
wordt gebruikt als die beschikbaar is.
-
Dat is alles wat ik wilde zeggen
over het combineren van animaties
-
en mediaregels.
-
Bedankt voor het kijken.
