Kop 1

tagline

Animaties in een banner : het doel

Een banner is een element bij uitstek om animaties in te plaatsen. We gaan hier gebruik maken van CSS-transitions en CSS-keyframe animaties. Er wordt JavaScript ingezet om de animaties te starten door class-namen toe te voegen of te verwijderen.
In deze video zien we het resultaat.

Leerdoelen

  • animaties met CSS
    • CSS-transities
    • CSS keyframe animaties
  • veel herhaling van layout met CSS

Opdracht

Oefen deze tutorial mee en maak zelf een banner, die ervan verschilt. Maak bijvoorbeeld een staande banner van het fomaat leaaderboard: https://www.adcrowd.com/nl/blog/ken-je-maten.
Je kunt dan wel zelf het onderwerp bedenken (een banner voor jouw voetbalclub, of band of jouw mooiste opdracht tot nu toe).
Bedenk dan dat je wel dezelfde elementen moet gebruiken als in de tutorial.
Je moet de banner van de tutorial in een nieuw formaat namaken.

De bestanden van de gebruikte svg's en afbeelding klik hier.

Animaties in een banner 2: laag 1 stijlen

Vooral bij animaties van transities is het practisch om eerst de banner zo te stijlen zoals de elementen na de animatie geplaatst moeten zijn.
Dan kun je animeren naar een goed resultaat. De layout wordt hier weer verzorgd door CSS Grid. De afbeeldingen zijn hier SVG-afbeeldingen en zij kunnen eenvoudig geschaald worden naar het gewenste formaat.
Gebruikelijke afmetingen voor banner vind je op: https://www.adcrowd.com/nl/blog/ken-je-maten

De bestanden van de gebruikte svg's en afbeelding klik hier.

Animaties in een banner 3: elementen over elkaar

De ballon is een volgend element op een stukje tekst. Het bestaat uit een lege div. Deze wordt dus hoogte en breedte gegeven en een met de transform: translateX() -eigenschap geplaatst op dezelfde plek als d tekst. Deze tekst geeft je een z-index: 2 om hem erboven te plaatsen.
De selectie van de ballon valt niet mee, omdat deze div als eerder geselecteerd is met een geneste selector.
Die is daardoor specifieker dan een enkele selecteer. We moeten hier dus ook genest selecteren.

Animaties in een banner 4: laag 2 stijlen

Om laag 2 in beeld te krijgen geven we laag een een negatieve bovenmarge.
Laag 2 is dan in beeld en we kunnen vergelijkbaar met hiervoor met CSS- Grid de lay-out verzorgen. Om de elementen horizontaal uit te lijnen kunnen we een element in een Grid-layout een align-self eigenschap geven met als waarde center. De tekstelementen geeft je een line-height die gelijk is aan de hoogte van de banner. Alle elementen staan nu zoals ze op het eind van de animaties moeten staan.

Animaties in en banner 5: de eerste animaties

Nu alles goed staat, kunnen we terug naar laag 1 door de marge weer weg te halen.
We gaan een transitie maken bij 2 elementen. Het proces loopt op dezelfde manier.
De elementen krijgen een extra class mee en in de CSS wordt dan de positie geschreven, die bij deze extra class hoort. Dit betekent dat deze niet meer in de banner zichtbaar is. De afwijking van de eindpositie wordt hier via een transform: translate(); gegeven.
Het element zelf krijgt een transition eigenschap op transform meegeven.
Met JavaScript wordt dan met een setTimeOut(); de class verwijderd, waarop de transitie gaat plaatsvinden.
De opdracht om een class te verwijderen is classList.remove();

Animaties in een banner 6: meer transitions en cubic-bezier

We gaan op dezelfde manier door als in de vorige video. De transition kan ook nog een eigenschap meekrijgen over het verloop van de overgang. Deze kan langzaam opkomen en/of eindigen. Je kunt dit zelf helemaal aanpassen met cubic-bezier. Op http://cubic-bezier.com/ kun je spelenderwijs de juiste coördinaten vinden.

Animaties in een banner 7: keyframe-animaties

Een tegenhanger van transities in CSS zijn keyframe-animaties.
Hier wordt de achtergrond-positie van de banner geanimeerd. Je doet dit met de animation-eigenschap. Je geeft dar in ieder geval een naam voor de animatie en de tijdsduur op. Verder wordt hier toegevoegd dat de animatie heen- en weer gaat door de waarde alternate toe te voegen, en dat de animatie zonder ophouden moet herhalen met infinite.
Met @keyframes geef je de genoemde animatie op elk moment in de tijdlijn de eigenschappen weer. De tijdlijn wordt in procenten 0 tot 100 procent verdeeld.
We kunnen ook een element een ingewikkelde animatie met tussenstapjes geven door in de tijdlijn tussenwaarden te geven. We gaan een van de elementen steeds een andere rotatie geven. Omdat het element al een transitie heeft Gaan we het woord een span geven met een eigen class-naam. Voor de rotatie is het wel van belang dat dit element een display: inline-block; krijgt. Inline elementen kunnen niet geanimeerd worden.

Animaties in een banner 8: keyframe-animatie van opeenvolgende elementen

Ook hier een keyframe-animatie, waarbij de lettrés van een woord eerst heel groot en transparant zijn en dan naar hun oorspronkelijke grootte en opaciteit worden teruggebracht.
Het effect wordt sterk als iedere letter dat ietsje later doet. Dit kan via animation-delay.
Twee lastige aspecten zijn uit te zoeken welke selector gekozen moet worden en welke class moet worden toegevoegd om de animaties te starten.
Daarnaast moeten we ons weer realiseren dat de letters ieder een eigen span hebben en dat die weer een display-type inline-block moeten hebben.

Animaties in een banner 9: animaties afronden

De laatste elementen krijgen een bekende transitie-animatie.
Daarnaast wordt via JavaScript de banner aan een pagina gelinkt, die in een nieuw venster moet openen zodat de bezoeker van de site met de banner die site niet verlaten.

Animaties in een banner 10: de animaties herhalen

We kunnen met een setInterval(); de hele animatie herhalen. De class-namen, die door het JavaScript eerder geplaatst zijn, moeten worden verwijderd en de verwijderde weer teruggezet.
Met een setTimeout(); kan dit op het juiste moment in het JavaScript gedaan worden. Gebruik daarvoor .classList.add(); en classList.remove();