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">×</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">×</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>
Leave a Reply