A sáv animálása

A 6.0-s sávot úgy építették, hogy teljesen rugalmas legyen. Az alapbeállítás egyszerű, megfelel a WCAG és ADA elvárásoknak, és sok beállítása elérhető a felületen. Animációt is adhatsz hozzá az Animate.css animációi közül; az alábbiakban négyet mutatunk.

Az animate.css betöltése

A legtöbb webhelyen nem kell hozzáadni: a téma vagy a böngésző már tartalmazza, ezért előbb próbáld meg nélküle. Ha az animáció mégsem működik, a webhely <head> részébe tedd be az Animate.css stíluslapjára mutató link elemet. Ehhez használhatsz például Header Footer Code Manager bővítményt, vagy FTP-n át is megteheted.

Az animáció kiválasztása

1. A Complianz → Consent Banner → Custom CSS oldalon kapcsold be az egyéni CSS-t (Use Custom CSS).
2. A Complianz → Consent Banner → Appearance oldalon állítsd be:
   • Position: bármelyik, kivéve a középre igazítottat (a középre igazított sáv transform tulajdonságai bizonyos animációkat nem engednek),
   • Animation: None.
3. A Custom CSS fülre írd be a választott animáció kódját.

Rubber band

.cmplz-cookiebanner {
    animation: rubberBand 1s;
    -webkit-animation: rubberBand 1s;
    -moz-animation: rubberBand 1s;
    -o-animation: rubberBand 1s;
    -ms-animation: rubberBand 1s;
}

Tada

.cmplz-cookiebanner {
    animation: tada 1s;
    -webkit-animation: tada 1s;
    -moz-animation: tada 1s;
    -o-animation: tada 1s;
    -ms-animation: tada 1s;
    animation-delay: 0.3s;
}

Roll in

.cmplz-cookiebanner {
    animation: rollIn 1s;
    -webkit-animation: rollIn 1s;
    -moz-animation: rollIn 1s;
    -o-animation: rollIn 1s;
    -ms-animation: rollIn 1s;
}

Flip in Y

.cmplz-cookiebanner {
    animation: flipInY 2s;
    -webkit-animation: flipInY 2s;
    -moz-animation: flipInY 2s;
    -o-animation: flipInY 2s;
    -ms-animation: flipInY 2s;
}

Nem mindegyik animáció illik minden webhelyhez, ezért próbáld ki, melyik áll jól az oldaladon.