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.
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.
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.
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.
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.
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();
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.
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.
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.
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.
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();