51 lines
2.0 KiB
JavaScript
51 lines
2.0 KiB
JavaScript
(function($) {
|
|
// Nur ausführen, wenn die Body-Klasse vorhanden ist
|
|
if (!$('body').hasClass('festive-birthday')) {
|
|
return;
|
|
}
|
|
|
|
const colors = [
|
|
'#e74c3c', '#3498db', '#2ecc71', '#f1c40f', '#e67e22', '#9b59b6', '#1abc9c', '#34495e', '#f39c12', '#d35400',
|
|
'#FFB6C1', '#ADD8E6', '#98FB98', '#F0E68C', '#DDA0DD', '#FFD700', '#C0C0C0'
|
|
];
|
|
|
|
function createBalloon() {
|
|
const size = 60 + Math.random() * 60;
|
|
const duration = 12 + Math.random() * 8;
|
|
const startX = Math.random() * 100;
|
|
const selectedColor = colors[Math.floor(Math.random() * colors.length)];
|
|
|
|
// Der SVG-Code für einen Ballon
|
|
const svgCode = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120" width="' + size + '" height="' + (size * 1.2) + '">' +
|
|
'<path d="M50 10 C70 10, 90 30, 90 55 C90 80, 70 100, 50 100 C30 100, 10 80, 10 55 C10 30, 30 10, 50 10 Z" fill="' + selectedColor + '" stroke="#333" stroke-width="0.5"/>' +
|
|
'<path d="M50 100 L45 110 L55 110 Z" fill="' + selectedColor + '"/>' +
|
|
'<line x1="50" y1="110" x2="50" y2="120" stroke="#333" stroke-width="1"/>' +
|
|
'</svg>';
|
|
|
|
// Wir erstellen ein <img>-Element und setzen den SVG-Code als src
|
|
const $balloon = $('<img>').attr('src', 'data:image/svg+xml;base64,' + btoa(svgCode)).css({
|
|
position: 'fixed',
|
|
bottom: '-200px',
|
|
left: startX + '%',
|
|
zIndex: 999999,
|
|
pointerEvents: 'none',
|
|
userSelect: 'none',
|
|
transform: 'translateX(-50%)',
|
|
opacity: 0.9
|
|
});
|
|
|
|
$('body').append($balloon);
|
|
|
|
$balloon.animate({ bottom: '120vh' }, {
|
|
duration: duration * 1000,
|
|
easing: 'linear',
|
|
complete: function() {
|
|
$(this).remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
createBalloon();
|
|
setInterval(createBalloon, 1200);
|
|
|
|
})(jQuery); |