Files
Festive-Seasons-Pro/assets/js/christmas-star.js

47 lines
1.5 KiB
JavaScript

(function($) {
// Nur ausführen, wenn die Body-Klasse vorhanden ist
if (!$('body').hasClass('festive-christmas')) {
return;
}
const pluginUrl = fsp_vars.plugin_url;
function createStar() {
const $star = $('<img>').attr('src', pluginUrl + 'assets/img/gold-star.png').css({
position: 'fixed',
width: '80px',
top: Math.random() * 80 + '%',
left: Math.random() * 80 + '%',
zIndex: 9999,
pointerEvents: 'none',
opacity: 0,
transform: 'translate(-50%, -50%) scale(0.5)'
});
$('body').append($star);
// Einblenden und pulsieren
$star.animate({
opacity: 1,
transform: 'translate(-50%, -50%) scale(1)'
}, 1000, function() {
$(this).animate({ transform: 'translate(-50%, -50%) scale(1.2)' }, 800).animate({ transform: 'translate(-50%, -50%) scale(1)' }, 800);
});
// Nach 10 Sekunden ausblenden und entfernen
setTimeout(function() {
$star.fadeOut(1000, function() {
$(this).remove();
});
}, 10000);
}
// Erstelle einen anfänglichen "Burst" von 3 Sternen
for (let i = 0; i < 3; i++) {
setTimeout(createStar, i * 500);
}
// Erstelle dann regelmäßig neue Sterne in kürzeren Abständen
setInterval(createStar, 3000);
})(jQuery);