Ücretsiz Film ve Dizi İzle - Exxen, Netflix, Blu Tv,

WEBSİTE - KAR YAĞDIRMA EFEKTİ

Merhaba Arkadaşlar;

2023 Yılının son günlerine geldik malumunuz üzere. Bu süreç içerisinde bir çok web sitesinde bir kar yağdırmadır aldı başını gitti.

Hatta şu an bu yazıyı da belki bu efektin arkasında okuyor olabilirsiniz. Şimdi web sitesine kar yağdırma efekti nasıl verilir bunu görelim.

Vereceğim bu web site kar yağışı html/JavaScript yada eklentisini blogger da düzenle menüsünden HTML/JAVASCİRPT yazan kısma yapıştırarak da ekleyebilirsiniz. 

KOD:

<div id="ust-alan" style="position: relative; width: 100%; height: 300px;">

  <img src="LogoResmi.png" alt="Logo" style="max-width: 100%; height: auto;">

  <div id="kar-yagisi" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>

</div>

<style>

  .kar-yagisi {

    position: absolute;

    animation: karHareket 5s linear infinite;

  }

  @keyframes karHareket {

    0% {

      transform: translateY(0) rotate(0deg);

      opacity: 1;

    }

    100% {

      transform: translateY(var(--dusmeYuksekligi, 50px)) rotate(360deg);

      opacity: 0;

    }

  }

</style>

<script>

  function karYagisiDusur() {

    var karYagisi = document.getElementById("kar-yagisi");

    var karSayisi = 50; // Kar sayısını isteğinize göre ayarlayabilirsiniz

    var dusmeYuksekligi = "50px"; // Düşme yüksekliğini ayarlayın

    var bitisMesafesi = "800px"; // Bitiş mesafesini ayarlayın

    

    for (var i = 0; i < karSayisi; i++) {

      var kar = document.createElement("img");

      kar.src = "KarResmi.png"; // Kar resminin yolunu belirtin

      kar.className = "kar-yagisi";

      kar.style.left = Math.random() * 100 + "%";

      kar.style.animationDuration = Math.random() * 5 + 5 + "s"; // Animasyon süresini isteğinize göre ayarlayabilirsiniz

      kar.style.opacity = Math.random();

      kar.style.setProperty("--dusmeYuksekligi", dusmeYuksekligi);

      karYagisi.appendChild(kar);

    }

    

    karYagisi.style.setProperty("--bitisMesafesi", bitisMesafesi);

  }

  karYagisiDusur();

</script>

Kar Yağışı - blogger html - blogger html/javascript - blogger javascirpt - blogger kar yağışı - blogger kar eklenti - blogger eklenti Siteye Kar Yağdırma Efekti Ekleme | Oyun Gros