[Update] Animated Gift Box Overlay with FontAwesome for a Giveaway

We used this code example to promote a giveaway with Lush. You can use and edit this code freely. Also: If you don’t want the additional functionality, scroll down, to only use the DIV container, and associated CSS.

Add as a PHP Snippet to your functions.php, f.ex. via Code Snippets Plugin.

See the Pen Animated Gift Box, 70% opacity, sticky float by Nico Pahl (@gooloonetwork) on CodePen.

Explanation:

The URL in $excluded_url is the link to the post, that this banner actually points to. This makes sure, that it doesn’t appear on the Giveaway page. This Code also adds a small “X” at the top-right corner, that closes the DIV on click. This functionality requires the full PHP Snippet.

Replace URLs and Texts at your desire.

add_action('wp_footer', 'custom_gift_box_notification');

function custom_gift_box_notification() {
    $current_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    $excluded_url = 'https://www.gooloo.de/2024/09/teste-fuer-uns-3-lush-badebomben.html';

    if ($current_url !== $excluded_url) {
        ?>
        <style>
.gift-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 0, 128, 0.7);
    padding: 15px 40px 15px 15px; /* Added right padding for close button */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-wrap: wrap;
}
            .gift-icon {
                font-size: 36px;
                color: white;
                margin-right: 15px;
                animation: bounce 2s infinite;
            }
            .gift-text {
                color: white;
                font-size: 16px;
                text-decoration: none;
                text-align: center;
                flex: 1;
                margin: 10px 0;
            }
.close-btn {
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
            @keyframes bounce {
                0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
                40% {transform: translateY(-20px);}
                60% {transform: translateY(-10px);}
            }
@media (max-width: 768px) {
    .gift-container {
        flex-direction: column;
        padding: 10px 30px 10px 10px; /* Adjusted padding for mobile */
    }
    .gift-icon {
        font-size: 28px;
        margin-right: 0;
        margin-bottom: 10px;
    }
    .gift-text {
        font-size: 14px;
    }
    .close-btn {
        font-size: 20px;
        padding: 8px;
        top: 10px; /* Adjusted top position for mobile */
        transform: none; /* Remove vertical centering on mobile */
    }
}
        </style>
<div class="gift-container">
    <i class="fa-solid fa-gift gift-icon"></i>
    <a href="https://www.gooloo.de/2024/09/teste-fuer-uns-3-lush-badebomben.html" class="gift-text">Wir suchen bis zum 30.09. Produkttester!</a>
    <span class="close-btn">&times;</span>
</div>
        <script>
            function closeGiftBox() {
                document.getElementById('giftContainer').style.display = 'none';
            }
        </script>
        <?php
    }
}

To only use the DIV, add this to your body:

<div class="gift-container">
    <i class="fa-solid fa-gift gift-icon"></i>
    <a href="https://www.gooloo.de/2024/09/teste-fuer-uns-3-lush-badebomben.html" class="gift-text">Wir suchen bis zum 30.09. Produkttester!</a>
    <span class="close-btn">&times;</span>
</div>

and this CSS to your Theme’s CSS File:

.gift-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 0, 128, 0.7);
    padding: 15px 40px 15px 15px; /* Added right padding for close button */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-wrap: wrap;
}
            .gift-icon {
                font-size: 36px;
                color: white;
                margin-right: 15px;
                animation: bounce 2s infinite;
            }
            .gift-text {
                color: white;
                font-size: 16px;
                text-decoration: none;
                text-align: center;
                flex: 1;
                margin: 10px 0;
            }
.close-btn {
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
            @keyframes bounce {
                0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
                40% {transform: translateY(-20px);}
                60% {transform: translateY(-10px);}
            }
@media (max-width: 768px) {
    .gift-container {
        flex-direction: column;
        padding: 10px 30px 10px 10px; /* Adjusted padding for mobile */
    }
    .gift-icon {
        font-size: 28px;
        margin-right: 0;
        margin-bottom: 10px;
    }
    .gift-text {
        font-size: 14px;
    }
    .close-btn {
        font-size: 20px;
        padding: 8px;
        top: 10px; /* Adjusted top position for mobile */
        transform: none; /* Remove vertical centering on mobile */
    }
}

Also, add the following JS for the closing effect:

<script>
document.querySelector('.close-btn').addEventListener('click', function() {
    document.querySelector('.gift-container').style.display = 'none';
});
</script>