DocsAllOver jQuery Animated Cookie Consent Box with Cookie Bubble.js Snippets

jQuery Animated Cookie Consent Box with Cookie Bubble.js

May 5, 2025

CSS, Js, Responsive, Card, Notification

Full Screen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Animated Cookie Consent Box With Cookie BubbleJS</title>
    <style type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"></style>
</head>
<body>
    <h1>jQuery Animated Cookie Consent Box With Cookie BubbleJS</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://unpkg.com/jquery-cookie-bubble@1.0.0/dist/cookieBubble.min.js"></script>
    <script>
        (function ($) {
                $.cookieBubble();
        })(jQuery);
    </script>
</body>
</html>

body {
    position: relative;
    background: #eee;
    margin: 0px;
    padding: 0px;
    height: 100%;
}

h1 {
    text-align: center;
    margin-top: 4rem;
}

.cookie-bubble {
    position: fixed;
    width: 100%;
    max-width: 400px;
    min-height: 100px;
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    font-family: sans-serif;
}

.cookie-bubble.top-left {
    top: 10px;
    left: 10px;
}

.cookie-bubble.top-right {
    top: 10px;
    right: 0px;
}

.cookie-bubble.top-center {
    top: 10px;
    left: calc(100vw - 100vw/2 - 400px/2);
}

.cookie-bubble.bottom-left {
    bottom: 10px;
    left: 10px;
}

.cookie-bubble.bottom-right {
    bottom: 10px;
    right: 0px;
}

.cookie-bubble.bottom-center {
    bottom: 10px;
    left: calc(100vw - 100vw/2 - 400px/2);
}

.cookie-bubble.show.top-left,
.cookie-bubble.show.top-center,
.cookie-bubble.show.top-right {
    -webkit-animation-name: popInTop;
    animation-name: popInTop;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.cookie-bubble.show.bottom-left,
.cookie-bubble.show.bottom-center,
.cookie-bubble.show.bottom-right {
    -webkit-animation-name: popInBottom;
    animation-name: popInBottom;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.cookie-bubble.hide {
    display: none;
}

.cookie-bubble .cb-wrapper {
    position: relative;
    display: inline-block;
    padding: 15px;
}

.cookie-bubble .cb-wrapper .cb-row {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
}

.cookie-bubble .cb-wrapper .cb-row .cb-row-content .message {
    position: relative;
    width: 100%;
    display: inline-block;
    color: #000000;
    font-size: 18px;
    margin-top: 0px;
}

.cookie-bubble .cb-wrapper .cb-row .cb-row-content .cb-controls {
    position: relative;
    width: 100%;
    float: left;
    margin-top: 10px;
}

.cookie-bubble .cb-wrapper .cb-row .cb-image {
    padding-right: 23px;
}

.cookie-bubble .cb-wrapper .cb-row .cb-image .cookie-inner-color {
    fill: #5271ff;
}

.cookie-bubble .cb-wrapper .cb-row .cb-image svg {
    width: 75px;
}

.cookie-bubble .cb-wrapper .cb-row .agreement-btn {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    color: #fff;
    background: #5271ff;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 14px;
    opacity: 1;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    float: left;
    margin-right: 10px;
}

.cookie-bubble .cb-wrapper .cb-row .agreement-btn:hover {
    background-color: #5271ff;
}

.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn {
    margin: 0px;
    color: #000;
    padding: 10px 0px;
    border-radius: 100px;
    font-size: 14px;
    opacity: .95;
    border: none;
    cursor: pointer;
    font-weight: 400;
    float: left;
}

.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn:hover {
    opacity: 1;
    text-decoration: underline;
}


@-webkit-keyframes popInBottom {
    0% {
        -webkit-transform: translateY(120%);
        transform: translateY(120%);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes popInBottom {
    0% {
        -webkit-transform: translateY(120%);
        transform: translateY(120%);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-webkit-keyframes popInTop {
    0% {
        -webkit-transform: translateY(-120%);
        transform: translateY(-120%);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes popInTop {
    0% {
        -webkit-transform: translateY(-120%);
        transform: translateY(-120%);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@media (max-width: 420px) {
    .cookieBubble {
        border-radius: 0px;
        max-width: inherit;
        left: 0px !important;
        bottom: 0px !important;
    }
}

@media (max-width: 420px) {
    .cookieBubble .cb-image {
        display: none;
    }
}

//Doesn't require any JS.

This snippet creates an engaging and interactive cookie consent box, designed with jQuery and the Cookie Bubble.js library to clearly present cookie usage information across various screen sizes.

Key Features:

Responsive Design: The cookie consent box adapts seamlessly to different screen sizes, providing optimal viewing and interaction on desktops, tablets, and mobile devices.
Engaging Animation: Utilizes the Cookie Bubble.js library to provide a visually appealing bubble animation, making the consent process more interactive.
User-Friendly Interaction: Facilitates easy interaction for users to accept or customize their cookie preferences.

Implementation:

Include jQuery and Cookie Bubble.js: Ensure that both the jQuery library and the Cookie Bubble.js library are included in your project.
Apply CSS Styling: Use CSS to style the various elements of the cookie consent box, such as text, buttons, and the bubble animation container, ensuring visual clarity and alignment with your website's design.
Implement JavaScript Functionality: Write JavaScript code using jQuery and Cookie Bubble.js to initialize the animation, handle user interactions with the consent options, and manage cookie settings based on user choices.

By following these steps, you can create a fully responsive and visually engaging cookie consent box that effectively communicates your website's cookie policy and enhances the user experience.

Latest Snippets

View All