Zapada 4 ~ Blogul lui Petre Vitan

Script Ninsoare Inteligentă (Smart Snowfall cu Pausă de Inactivitate) Realizat de petre-vitan

Previzualizare efect ninsoare (Animație simulată local într-o casetă de test):

SMART SNOW PREVIEW

Codul sursă de copiat pentru Blogspot:

<!-- ======================================================= -->
<!-- SCRIPT NINSOARE INTELIGENTĂ CU PAUZĂ DE INACTIVITATE      -->
<!-- REALIZAT DE PETRE-VITAN (https://petrevitanblog.blogspot.com/) -->
<!-- ======================================================= -->
<div class="snow-container"></div>

<style>
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  pointer-events: none;
}
.snowflake {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
  opacity: 0.8;
  pointer-events: none;
}
@keyframes fall {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; }
  100% { opacity: 0.5; transform: translateY(100vh); }
}
@keyframes diagonal-fall {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: 1; }
  100% { opacity: 0.25; transform: translate(10vw, 100vh); }
}
</style>

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
  const container = document.querySelector(".snow-container");
  if (!container) return;

  const particlesPerThousand = 0.1;
  const fallSpeed = 1.25;
  const pauseWhenNotActive = true;
  const maxSnowflakes = 200;
  const snowflakes = [];
  let snowflakeInterval;
  let isTabActive = true;

  function resetSnowflake(flake) {
    const size = Math.random() * 5 + 1;
    const viewportWidth = window.innerWidth - size;
    
    flake.style.width = size + "px";
    flake.style.height = size + "px";
    flake.style.left = (Math.random() * viewportWidth) + "px";
    flake.style.top = "-" + size + "px";
    
    const duration = (Math.random() * 3 + 2) / fallSpeed;
    flake.style.animationDuration = duration + "s";
    flake.style.animationTimingFunction = "linear";
    flake.style.animationName = Math.random() < 0.5 ? "fall" : "diagonal-fall";

    setTimeout(() => {
      if (parseFloat(flake.style.top) < window.innerHeight) {
        resetSnowflake(flake);
      } else {
        flake.remove();
      }
    }, duration * 1000);
  }

  function createSnowflake() {
    if (snowflakes.length < maxSnowflakes) {
      const flake = document.createElement("div");
      flake.classList.add("snowflake");
      snowflakes.push(flake);
      container.appendChild(flake);
      resetSnowflake(flake);
    }
  }

  function generateSnowflakes() {
    const numParticles = Math.ceil((window.innerWidth * window.innerHeight) / 1000) * particlesPerThousand;
    const interval = 5000 / numParticles;
    clearInterval(snowflakeInterval);
    snowflakeInterval = setInterval(() => {
      if (isTabActive && snowflakes.length < maxSnowflakes) {
        requestAnimationFrame(createSnowflake);
      }
    }, interval);
  }

  function handleVisibilityChange() {
    if (!pauseWhenNotActive) return;
    isTabActive = !document.hidden;
    if (isTabActive) {
      generateSnowflakes();
    } else {
      clearInterval(snowflakeInterval);
    }
  }

  generateSnowflakes();

  window.addEventListener("resize", () => {
    clearInterval(snowflakeInterval);
    setTimeout(generateSnowflakes, 1000);
  });

  document.addEventListener("visibilitychange", handleVisibilityChange);
});
//]]>
</script>

🛠️ Cum se instalează scriptul de ninsoare pe Blogspot:

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

Zapada 4

Niciun comentariu:

Trimiteți un comentariu

Formular de contact

Nu rata nicio noutate! Abonează-te și primești articolele pe mail:

Articole la întâmplare

Blogul lui Nurilusa

Ultimile comentarii

Bine de stiut