Cara Membuat Efek Animasi Loading Blog PS4 Keren


Cara Membuat Efek Animasi Loading Blog PS4 Keren - Hallo sobat sobat blogger sekalian, Selamat datang kembali di blog sederhana saya ini, Saya ucapkan selamat membaca artikel yang saya sediakan ini spesial untuk kalian para pengunjung setia blog saya ini.

Pada siang hari yang lumayan cukup cerah ini, Saya baru saja mendapatkan sebuah ide untuk membagikan kembali sebuah tutorial yang mungkin akan sangat sangat bermanfaat sekali buat kalian, Jika kalian para blogger yang sering sekali, atau ,memiliki hobi mengoprek tampilan dari blog kaliam Tak ada salahnya jika kalian untuk mempraktekan tutorial yang akan saya ajarkan kepada kalian semua.

Cara Membuat Efek Animasi Loading Blog PS4 Keren, Sebenarnya sangat lah mudah sekali, Kalian hanya cukup copy paste saja, Untuk menerapkan nya pada blog kalian semua, saya sarankan kalian menggunakan Pc saat mempraktekan nya, Karena apabila via Pc Akan sangat lebih mudah sekali kalian untuk menerapkannya.

Baiklah mari langsung saja kita melakukan pemasangannya, Gak usah tunggu lama lagi, Kita masuk ke mode step tutorialnya, Kalian tidak perlu khawatir untuk bingung, Karena pada dasar nya tutorial ini sangat lah mudah sekali.

Step Tutorial

  1.  Silahkan masuk ke akun blogger kalian masing masing .
  2. Selanjutnya pilih menu Template, Lalu pilih opsi Edit Html.
  3. Lalu kalian cari Kode </head> , Jika kalian menggunakan Pc Cukup Ctrl + F, Lalu cari kode </head> dan enter, Jika ada Kalian Tempatkan Kode Css Di bawah Ini, Tepat Di atas Kode </head>.
    <style>
     div#loading-abdoutechnologie {
        right: 0;
        bottom: 0;
        position: fixed;
        z-index: 99999999999999999999;
        display: block;
        left: 0;
        top: 0;
       background: #1d80d6;
        background: -moz-linear-gradient(-45deg, #1d80d6 0%, #05306d 34%, #05306d 70%, #1d80d6 100%);
        background: -webkit-linear-gradient(-45deg, #1d80d6 0%,#05306d 34%,#05306d 70%,#1d80d6 100%);
        background: linear-gradient(135deg, #1d80d6 0%,#05306d 34%,#05306d 70%,#1d80d6 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d80d6', endColorstr='#1d80d6',GradientType=1 );
        width: 100%;
        height: 100%;
    }
     
     
    #thanks {
      padding: 10%;
    }
    #thanks-button {
      cursor: pointer;
      padding: 2%;
      color: #fff;
      position: absolute;
      bottom: 0%;
      z-index: 12;
      background: #000;
        -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
    }
    #close-cross {
       cursor: pointer;
    }
    .container1 {
          margin-top: 80px;
      position: absolute;
      width: 100vw;
      height: 100vh;
    }
    .ps4-icons {
        position: relative;
        width:12vw;
        margin:auto;
        margin-top: 10vw;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
    }
     
    @-moz-keyframes scaling {
      0% {
        transform: rotate(270deg) scale(0);
      }
      100% {
        transform: rotate(360deg) scale(1);
      }
    }
    @-webkit-keyframes scaling {
      0% {
        transform: rotate(270deg) scale(0);
      }
      100% {
        transform: rotate(360deg) scale(1);
      }
    }
     
    @keyframes scaling {
      0% {
        transform: rotate(270deg) scale(0);
      }
      100% {
        transform: rotate(360deg) scale(1);
      }
    }
    @-o-keyframes scaling {
      0% {
        transform: rotate(270deg) scale(0);
      }
      100% {
        transform: rotate(360deg) scale(1);
      }
    }
     
     
    .cross-icon {
      background: url(https://d.top4top.net/p_579vpz791.png) no-repeat;
      background-size: 100%;
      width: 4vw;
      height: 4vw;
      margin: 1vw;
      float:left;
    }
     
    .square-icon {
      background: url(https://b.top4top.net/p_5790u4dm3.png) no-repeat;
      background-size: 100%;
      width: 4vw;
      height: 4vw;
      margin: 1vw;
      float:left;
    }
    .triangle-icon {
      background: url(https://f.top4top.net/p_579x3s3u2.png) no-repeat;
      background-size: 100%;
      width: 4vw;
      height: 4vw;
      margin: 1vw;
      float:left;
    }
    .circle-icon {
      background: url(https://e.top4top.net/p_579ythha1.png) no-repeat;
      background-size: 100%;
      width: 4vw;
      height: 4vw;
      margin: 1vw;
      float:left;
    }
     
     
     
     
     
     
    #thanks {
        -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      position: absolute;
      bottom: -50%;
      background: #000;
      color: #fff;
      padding: 1%;
    }
    #thanks a {
      color: #fff;
      text-decoration: underline;
      font-weight: normal;
    }
     
     </style>
    
  4. Selanjutnya kalian Letakan Code Javascript di bawah ini tepat diatas kode </body>.
    <script type='text/javascript'>
    function randomShape(array) {
      return array[Math.floor(Math.random() * array.length)];
    }
    function loadingScreen(){
    var cross = 'https://d.top4top.net/p_579vpz791.png';
    var circle = 'https://e.top4top.net/p_579ythha1.png';
    var triangle = 'https://f.top4top.net/p_579x3s3u2.png';
    var square = 'https://b.top4top.net/p_5790u4dm3.png';
    var elements = document.querySelectorAll('.ps-icon');
        Array.prototype.forEach.call(elements, function(el, i){
        setTimeout(function(){
          el.style.animation = "scaling";
          el.style.animationDuration = "1s";
          el.style.animationIterationCount = "1";
          el.style.backgroundImage = "url("+randomShape([triangle,square,circle,cross])+")";      
    }, (i * 400));
          el.style.animation = "";
          el.style.animationDuration = "";
          el.style.animationIterationCount = "";  
    });
    function changeShape(){  
        var elements = document.querySelectorAll('.ps-icon');
        Array.prototype.forEach.call(elements, function(el, i){
        setTimeout(function(){
          el.style.animation = "scaling";
          el.style.animationDuration = "1s";
          el.style.animationIterationCount = "1";
          el.style.backgroundImage = "url("+randomShape([triangle,square,circle,cross])+")";      
    }, 100 + (i * 300));
          el.style.animation = "";
          el.style.animationDuration = "";
          el.style.animationIterationCount = "";  
    });
     
    }
    setInterval(changeShape,3000);  
    }
    loadingScreen();
     </script>
    <script>
     
            $(window).load(function(){  
       $("#loading-abdoutechnologie").fadeOut(1000)
      });
     </script>
    <div id='loading-abdoutechnologie'>
     
    <div class="container1">
      <div class="ps4-icons">
        <div class="square-icon ps-icon"></div>
        <div class="cross-icon ps-icon"></div>
        <div class="circle-icon ps-icon"></div>
        <div class="triangle-icon ps-icon"></div>
      </div>
    </div>
     
    </div>
    
  5. Selanjutnya Silahkan kalian simpan template nya, Dan lihatlah perubahannya.

Bagaimana sobat sobat ?
Cukup muudah bukan cara nya ?
Tentunya kalian gak perlu bingung - bingung, Karena tugas kalian hanyalah copy paste saja, Jika menurut kalian tutorial ini bermanfaat, Kalian bisa membagikan nya pada social media kalian masing masing, Jika menurut kalian ada kekeliruan yang telah saya ucapakan, Mohon sekiranya untuk memberi tahu saya pada kolom komentar yang telah saya sediakan.

Penutup

Demikianlah artikel ini bisa saya sampaikan kepada kalian semua, Semoga artikel yang sajikan ini bisa menjadi manfaat tersendiri untuk kalian semua tentunya, Jangan lupa untuk selalu mengunjungi blog saya ini, Cukup sekian dari saya,

Terimakasih.

0 Response to "Cara Membuat Efek Animasi Loading Blog PS4 Keren"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel