We built our new cookie banners for 6.0 with the idea to be fully flexible. A solid, minimal default set-up complies with WCAG and ADA and has many settings directly available in the back-end, and is fully customizable as you expect from WordPress.
In this article, we will show you how you can add different animations to your banner. You can view all the different types of animations we use and much more on Animate.css, but for now, we selected four different styles to show. For most websites, this works out of the box and comes with the browser, but if yours doesn’t, we will first explain how to add the CSS should you want a style that needs it.
How to add the animate.css
< head >< /head >
/** Try without first. It might be included by your theme.
**
*/
< link rel="stylesheet" href="https://cdnjs.cloudflare.com/
ajax/libs/animate.css/4.1.1/animate.min.css >
To do this you can for example use a plugin such as Header Footer Code Manager. Here you can just put the line in to the head without any trouble, or if you prefer add it with FTP.
Choose your animation
Now we can add the CSS for your preferred animation. Because we already have an animation in place it is very easy to edit.
The first step is to make sure to settings are right, go to Complianz > Cookie banner Settings > General > Custom CSS, and turn this on.
Then go to Complianz > Cookie Banner Settings > Appearance, and make sure you have these settings:
- Position: Everything, but centered*
- Animation: None
*The transform properties of our centered banner do not allow certain animations.
.cmplz-cookiebanner {
animation: rubberBand 1s;
-webkit-animation: rubberBand 1s;
-moz-animation:rubberBand 1s;
-o-animation: rubberBand 1s;
-ms-animation: rubberBand 1s;
}
.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;
}
.cmplz-cookiebanner {
animation: rollIn 1s;
-webkit-animation: rollIn 1s;
-moz-animation: rollIn 1s;
-o-animation: rollIn 1s;
-ms-animation: rollIn 1s;
}
.cmplz-cookiebanner {
animation: flipInY 2s;
-webkit-animation: flipInY 2s;
-moz-animation: flipInY 2s;
-o-animation: flipInY 2s;
-ms-animation: flipInY 2s;
}
That’s it! Of course, these aren’t suited for every website, but if you are feeling adventurous, give it a try!
