Cara Membuat Efek Salju pada Website

Cara Membuat Efek Salju (How to Create a Snow Effect on Blog or Website) di Blogger maupun Wordpress

Snow Effect - Mungkin Anda telah mengunjungi situs web dengan efek salju yang turun. Indah dan menarik, bukan? Anda mungkin ingin situs WordPress, Blogger atau Website Anda memiliki kepingan salju putih yang beterbangan di layar pada saat musim dingin juga? Ini akan menjadi hal yang meriah untuk acara musim dingin atau Natal Anda, mungkin ini akan menarik dan menghibur pengunjung Anda setiap tahunnya. Disini saya akan membagikan sedikit Source Kode yang mungkin berguna untuk menghias situs kalian.

Source code ini tidak memnggunakan javascript, hanya menggunakan css dan simbol pada html saja. Jadi bisa di bilang, ini tidak terlalu membuat berat website kalian dan ini Efek salju ini bisa dibilang cukup simpel dan mudah.

Tutorial Membuat Efek Salju pada Blog/Website :

  • Pertama, tempelkan pemanggilan css ini di atas kode </style>, </head> atau ]]></b:skin> pada tema / template kalian (terapkan pada salah satu saja).
    .snowflake {
      color: #fff;
      font-size: 1em;
      font-family: Arial;
      text-shadow: 0 0 1px #000;
    }
    
    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running;text-shadow:0 0 5px #fff;filter:blur(0.2px);}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
  • Selanjutnya, silahkan tempel kode di bawah ini sebelum </body>.
    <div class="snowflakes" aria-hidden="true">
      <div class="snowflake">❅</div>
      <div class="snowflake">❅</div>
      <div class="snowflake">❅</div>
      <div class="snowflake">❅</div>
      <div class="snowflake">❅</div>
      <div class="snowflake">❅</div>
      <div class="snowflake">❅</div>
      <div class="snowflake">❅</div>
      <div class="snowflake">❅</div>
      <div class="snowflake">❅</div>
    </div>
  • Jika semua sudah diterapkan, silahkan untuk disimpan (save) dahulu.
  • Selesai

Sekian tentang tutorial kali ini "Cara Membuat Efek Salju di Blog/Website" atau dalam bahasa inggrisnya "How to Create a Snow Effect on Blog or Website". Terimakasih atas Kunjungannya :)

Posting Komentar