Stele care cad

Widget Efect Ploaie de Stele Căzătoare (FontAwesome) Realizat de petre-vitan

Previzualizare efect (Stelele cad și se rotesc în interiorul casetei de test):

TESTER PLOAIE STELE

Codul sursă de copiat pentru Blogspot:

<!-- ======================================================= --> <!-- SCRIPT PLOAIE DE STELE CĂZĂTOARE (FONTAWESOME) --> <!-- REALIZAT DE PETRE-VITAN --> <!-- ======================================================= --> <!-- Import obligatoriu FontAwesome pentru a afișa pictograma de stea --> <link rel="stylesheet" href="https://cloudflare.com" /> <style> .star { position: absolute; top: -30px; color: #f1c40f; /* Culoare aurie pentru stele */ animation: starFallAnim 5s linear forwards; pointer-events: none; z-index: 999999; } .star::before { content: "\f005"; font-family: FontAwesome; text-shadow: 0 0 5px rgba(241, 196, 15, 0.5), 0 0 15px rgba(241, 196, 15, 0.3); } @keyframes starFallAnim { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(105vh) rotate(360deg); opacity: 0; } } @media screen and (max-width: 600px) { .star { font-size: 8px !important; } } </style> <script type='text/javascript'> //<![CDATA[ /* Script by petre-vitan */ (function() { function createFallingStar() { let e = document.createElement("div"); e.setAttribute("class", "star"); document.body.appendChild(e); e.style.left = Math.random() * window.innerWidth + "px"; let size = Math.random() * 12 + 8; // Dimensiuni variate între 8px și 20px let duration = Math.random() * 3 + 2; // Durată între 2s și 5s e.style.fontSize = size + "px"; e.style.animationDuration = duration + "s"; setTimeout(function () { e.remove(); }, 5000); } // Generează o stea nouă la fiecare 100ms pentru a nu aglomera ecranul inutil setInterval(createFallingStar, 100); })(); //]]> </script>

🛠️ Cum se instalează ploaia de stele pe Blogspot:

1. Copiați scriptul făcând clic pe butonul Copiază Codul situat direct deasupra casetei de text.
2. Accesați panoul administrativ Blogger.
3. În meniul din stânga, faceți clic pe opțiunea Temă (Theme).
4. Apăsați pe triunghiul mic de lângă butonul portocaliu „Personalizează” și selectați Editați HTML (Edit HTML).
5. Faceți un clic în interiorul editorului de cod și apăsați scurtătura Ctrl + F.
6. Căutați tag-ul de închidere structurală </body>.
7. Lipiți codul copiat exact deasupra / înainte de această etichetă </body>.
8. Apăsați pictograma de Salvare (dischetă) din colțul din dreapta-sus al ecranului pentru a publica widgetul.