Tutorial Membuat Efek BlackBird - Animasi Bulu Gagak Berjatuhan - Code Pelajar

Code Pelajar - Tutorial ini adalah tutorial singkat jadi ikutilah dengan seksama, Penambahan fitur ini hanyalan sebuah opsi saja jika tertarik silahkan pasang, jika tidak maka tidak perlu - [Demo Scroll Kebawah].


Tutorial Membuat Efek BlackBird - Bulu Gagak Berjatuhan

  1. Salin dan terapkan CDN Jquery dibawah ini tepat di atas tag </head> jika di dalam template sobat belum ada
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  3. Salin dan terapkan CSS berikut kedalam tema Sobat
  4. /*CSS BLACKBIRD - CODEPELAJAR.COM*/
    .brack-bird {
     position: fixed;
     top: -100px;
     z-index: -1; //Atur agar layer nya pas
     opacity: 0.8
    }
    .brack-bird span {
     display: inline-block
    }
    .brack-bird img {
     width: 100%
    }
    .brack-bird.translateX0 p {
     -moz-animation: sway0 5s ease infinite;
     -webkit-animation: sway0 5s ease infinite;
     animation: sway0 5s ease infinite
    }
    .brack-bird.translateX1 p {
     -moz-animation: sway1 5s ease infinite;
     -webkit-animation: sway1 5s ease infinite;
     animation: sway1 5s ease infinite
    }
    .brack-bird.flip0 span {
     -moz-transform: scale(-1, 1);
     -ms-transform: scale(-1, 1);
     -webkit-transform: scale(-1, 1);
     transform: scale(-1, 1)
    }
    .brack-bird.rotate1 span {
     -moz-animation: move1 10s linear infinite;
     -webkit-animation: move1 10s linear infinite;
     animation: move1 10s linear infinite
    }
    .brack-bird.size1 span {
     width: 34px;
     height: 100px
    }
    .brack-bird.img1 span {
     background: url(https://1.bp.blogspot.com/-79NKyp9BJ3Q/XIo_LngRWfI/AAAAAAAAEUg/m_2oxol0rQ811hNj3Bv8xNlS55yge_LhwCLcBGAs/s1600/wing_01.png) no-repeat center center/contain
    }
    .brack-bird.speed1 {
     -moz-animation: fall 35s linear;
     -webkit-animation: fall 35s linear;
     animation: fall 35s linear
    }
    .brack-bird.rotate2 span {
     -moz-animation: move2 10s linear infinite;
     -webkit-animation: move2 10s linear infinite;
     animation: move2 10s linear infinite
    }
    .brack-bird.size2 span {
     width: 38px;
     height: 100px
    }
    .brack-bird.img2 span {
     background: url(https://2.bp.blogspot.com/-wnSeWhg7QnI/XIo_LfmDVlI/AAAAAAAAEUY/16Z-pY_46Kg9n57wVXkyzORmW6rLNaX-QCLcBGAs/s1600/wing_02.png) no-repeat center center/contain
    }
    .brack-bird.speed2 {
     -moz-animation: fall 40s linear;
     -webkit-animation: fall 40s linear;
     animation: fall 40s linear
    }
    .brack-bird.rotate3 span {
     -moz-animation: move3 10s linear infinite;
     -webkit-animation: move3 10s linear infinite;
     animation: move3 10s linear infinite
    }
    .brack-bird.size3 span {
     width: 42px;
     height: 100px
    }
    .brack-bird.img3 span {
     background: url(https://1.bp.blogspot.com/-n61SkXNM4Sg/XIo_LcM2UbI/AAAAAAAAEUc/qCo2xbfoaSY3HAmm23LKGKjGumIdEm5MgCLcBGAs/s1600/wing_03.png) no-repeat center center/contain
    }
    .brack-bird.speed3 {
     -moz-animation: fall 45s linear;
     -webkit-animation: fall 45s linear;
     animation: fall 45s linear
    }
    .brack-bird.rotate4 span {
     -moz-animation: move4 10s linear infinite;
     -webkit-animation: move4 10s linear infinite;
     animation: move4 10s linear infinite
    }
    .brack-bird.size4 span {
     width: 46px;
     height: 100px
    }
    .brack-bird.img4 span {
     background: url(https://2.bp.blogspot.com/-tAPOR2kA96I/XIo_MFuOYbI/AAAAAAAAEUk/lxGr-jt_BF4OwcgK6EFmSqRzMebsOzaWACLcBGAs/s1600/wing_04.png?b) no-repeat center center/contain
    }
    .brack-bird.speed4 {
     -moz-animation: fall 50s linear;
     -webkit-animation: fall 50s linear;
     animation: fall 50s linear
    }
    @-moz-keyframes fall {
     0% {
      -moz-transform: translate(0, 0);
      transform: translate(0, 0)
     }
     100% {
      -moz-transform: translate(0, 6000px);
      transform: translate(0, 6000px)
     }
    }
    @-webkit-keyframes fall {
     0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0)
     }
     100% {
      -webkit-transform: translate(0, 6000px);
      transform: translate(0, 6000px)
     }
    }
    @keyframes fall {
     0% {
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0)
     }
     100% {
      -moz-transform: translate(0, 6000px);
      -ms-transform: translate(0, 6000px);
      -webkit-transform: translate(0, 6000px);
      transform: translate(0, 6000px)
     }
    }
    @-moz-keyframes sway0 {
     0% {
      -moz-transform: translate(0, 0);
      transform: translate(0, 0)
     }
     50% {
      -moz-transform: translate(-50px, 0);
      transform: translate(-50px, 0)
     }
     100% {
      -moz-transform: translate(0, 0);
      transform: translate(0, 0)
     }
    }
    @-webkit-keyframes sway0 {
     0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0)
     }
     50% {
      -webkit-transform: translate(-50px, 0);
      transform: translate(-50px, 0)
     }
     100% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0)
     }
    }
    @keyframes sway0 {
     0% {
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0)
     }
     50% {
      -moz-transform: translate(-50px, 0);
      -ms-transform: translate(-50px, 0);
      -webkit-transform: translate(-50px, 0);
      transform: translate(-50px, 0)
     }
     100% {
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0)
     }
    }
    @-moz-keyframes sway1 {
     0% {
      -moz-transform: translate(0, 0);
      transform: translate(0, 0)
     }
     50% {
      -moz-transform: translate(50px, 0);
      transform: translate(50px, 0)
     }
     100% {
      -moz-transform: translate(0, 0);
      transform: translate(0, 0)
     }
    }
    @-webkit-keyframes sway1 {
     0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0)
     }
     50% {
      -webkit-transform: translate(50px, 0);
      transform: translate(50px, 0)
     }
     100% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0)
     }
    }
    @keyframes sway1 {
     0% {
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0)
     }
     50% {
      -moz-transform: translate(50px, 0);
      -ms-transform: translate(50px, 0);
      -webkit-transform: translate(50px, 0);
      transform: translate(50px, 0)
     }
     100% {
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0)
     }
    }
    @-moz-keyframes move1 {
     0% {
      -moz-transform: rotate(0deg);
      transform: rotate(0deg)
     }
     100% {
      -moz-transform: rotate(180deg);
      transform: rotate(180deg)
     }
    }
    @-webkit-keyframes move1 {
     0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
     }
     100% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg)
     }
    }
    @keyframes move1 {
     0% {
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
     }
     100% {
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg)
     }
    }
    @-moz-keyframes move2 {
     0% {
      -moz-transform: rotate(180deg);
      transform: rotate(180deg)
     }
     100% {
      -moz-transform: rotate(0deg);
      transform: rotate(0deg)
     }
    }
    @-webkit-keyframes move2 {
     0% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg)
     }
     100% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
     }
    }
    @keyframes move2 {
     0% {
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg)
     }
     100% {
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
     }
    }
    @-moz-keyframes move3 {
     0% {
      -moz-transform: rotate(90deg);
      transform: rotate(90deg)
     }
     100% {
      -moz-transform: rotate(270deg);
      transform: rotate(270deg)
     }
    }
    @-webkit-keyframes move3 {
     0% {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg)
     }
     100% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg)
     }
    }
    @keyframes move3 {
     0% {
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg)
     }
     100% {
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg)
     }
    }
    @-moz-keyframes move4 {
     0% {
      -moz-transform: rotate(270deg);
      transform: rotate(270deg)
     }
     100% {
      -moz-transform: rotate(90deg);
      transform: rotate(90deg)
     }
    }
    @-webkit-keyframes move4 {
     0% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg)
     }
     100% {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg)
     }
    }
    @keyframes move4 {
     0% {
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg)
     }
     100% {
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg)
     }
    }
  5. Salin dan terapkan javascript berikut kedalam template sobat, letkkan tepat di atas </body>
  6. <script>
    /*<![CDATA[*/
    $(document).ready(function() {
      var is_sp = !1;
        var t = $("body"),
            a = 0,
            e = is_sp ? 1e3 : 500;
        setInterval(function () {
            var i = Math.floor(110 * Math.random() - 5),
                n = " img" + Math.ceil(4 * Math.random()),
                s = " size" + Math.ceil(4 * Math.random()),
                o = " speed" + Math.ceil(4 * Math.random()),
                r = " rotate" + Math.ceil(4 * Math.random()),
                l = " translateX" + Math.round(Math.random()),
                c = " flip" + Math.round(Math.random());
            t.append('<div class="brack-bird' + n + s + o + r + l + c + '" style="left: ' + i + '%"><p><span></span></p></div>'), ++a > 25e3 / e && $(".brack-bird").first().remove()
        }, e)
    });
    /*]]>*/
    </script>
  7. Save Template(Tema) Sobat! dan lihat hasilnya

Untuk mengatur layernya cari css .black-bird dan cari z-index nya atur saja layer nya sesuka kalian. Itulah tutorial singkat yang menurut saya ini akan menjadi keren jika diletakkan disebuah halaman tertentu, selamat mencoba.

Table Of Content

    Contact Form

    Kirim