Membuat Ucapan Marhaban Dengan Efek Parallex

Tutorial membuat ucapan marhaban ya ramadhan dengan parallex efek di blogger, efek ini juga responsive saya juga memakai efek parallex ini pada blog saya selama bulan ramadhan. Tutorial ini saya dapatkan dari blog Kompi Ajaib pada postingan terbaru blog dia.

Sebagai menyambut bulan suci Ramadhan, saya ingin memberikan sambutan kepada bulan suci ini, semoga kita bisa menunaikan ibadah puasa selama bulan ini. Bila Anda ingin melihat demo ini, silakan Anda lihat di atas pada blog ini, mungkin saya terapkan sampai bulan puasa selesai.

Membuat Ucapan Marhaban Dengan Efek Parallex

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Copy CSS dibawah ini dan Pastekannya di atas kode </head>

<style type='text/css'>

/*<![CDATA[*/

.parallax {

  background: url(https://1.bp.blogspot.com/-eDvnHc9Xte8/WRwNHL66RsI/AAAAAAAArII/-9hXRACvQA0mVeHV2KKC86yf6ENEuTNTgCLcB/s1600/ramadhan.png);

  background-repeat: no-repeat;

  background-size: 100% 100%;

  height:100vh;

  width:100%;

  position:relative;

  z-index:9999;

}



.parallax h2 {

  text-align: center;

  padding: 70vh 0 0;

  font-size: 4em;

  line-height:1;

  color: white;

  font-family: "Trebuchet MS";

  margin:0;

}

.parallax p {

  text-align: center;

  padding: 20px 50px 0;

  margin:0;

  font-size: 2em;

  color: white;

  font-family: "Trebuchet MS";

}

.parallax .arrow_down{

  position:absolute;

  width:60px;

  height:60px;

  bottom:20px;

  left:50%;

  margin-left:-30px;

  font-size:24px;

  color:#fff;

}

.parallax .close_parallax{

  position:absolute;

  width:20px;

  height:20px;

  top:20px;

  right:25px;

  font-size:34px;

  line-height:1;

  color:#fff;

  cursor:pointer;

}

.parallax .bounce {

  -webkit-animation-name: bounce;

  animation-name: bounce;

  -webkit-transform-origin: center bottom;

  -ms-transform-origin: center bottom;

  transform-origin: center bottom;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

  animation-iteration-count: infinite;

  }

  @-webkit-keyframes bounce {

  0%, 20%, 53%, 80%, 100% {

  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  -webkit-transform: translate3d(0,0,0);

  transform: translate3d(0,0,0);

  }

  40%, 43% {

  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

  -webkit-transform: translate3d(0, -30px, 0);

  transform: translate3d(0, -30px, 0);

  }

  70% {

  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

  -webkit-transform: translate3d(0, -15px, 0);

  transform: translate3d(0, -15px, 0);

  }

  90% {

  -webkit-transform: translate3d(0,-4px,0);

  transform: translate3d(0,-4px,0);

  }

  }

  @keyframes bounce {

  0%, 20%, 53%, 80%, 100% {

  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  -webkit-transform: translate3d(0,0,0);

  transform: translate3d(0,0,0);

  }

  40%, 43% {

  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

  -webkit-transform: translate3d(0, -30px, 0);

  transform: translate3d(0, -30px, 0);

  }

  70% {

  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

  -webkit-transform: translate3d(0, -15px, 0);

  transform: translate3d(0, -15px, 0);

  }

  90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);

  }

  }

@media screen and (max-width:1024px){.parallax h2 {

  padding: 60vh 0 0;

  font-size: 2em;

}

.parallax p {

  font-size: 1em;

}

}

@media screen and (max-width:375px){.parallax h2 {

  padding: 50vh 0 0;

}

}

/*]]>*/
</style>

Langkah kedua :

Copy kode di bawah ini ke bawah kode <body>

 <section class="parallax" id="parallax">

    <h2>Marhaban Ya Ramadhan</h2>

    <p>Selamat menunaikan ibadah puasa, semoga amal ibadah kita diterima Allah SWT, aamiin.</p>

    <div class="arrow_down bounce"><img alt="down" width="60" height="60" src="https://3.bp.blogspot.com/-HJTeFvBoI8Y/WRwS6wxAnKI/AAAAAAAArIc/-QlF5qgEi7AKTZxNnm2TRpTnfx4VKKOEQCLcB/s1600/chevron-double-down%2B%25281%2529.png" /></div>

    <div class="close_parallax" onclick="hideParallax()" title="Close">&amp;times;</div>

  </section>

Langkah ketiga :

Langkah terakhir adalah, silakan terapkan Javascript dibawah ini ke atas kode </body>

 <script type='text/javascript'>

//<![CDATA[

var parallax= document.querySelector(".parallax");

window.addEventListener("scroll", function() {

   var scrolledHeight= window.pageYOffset,

                limit= parallax.offsetTop+ parallax.offsetHeight;            
  if(scrolledHeight > parallax.offsetTop && scrolledHeight <= limit) {

    parallax.style.backgroundPositionY=  (scrolledHeight - parallax.offsetTop) /1.5+ "px";

    } else {

     parallax.style.backgroundPositionY=  "0";

    }

     });

function hideParallax() {

document.getElementById("parallax").style.display = "none";

};

//]]>

</script>

Silakan Anda Save Template Anda.

Demikian tutorial yang bisa saya berikan hari ini, semoga bermanfaat. Jangan lupa like, share dan komentar.

Source : http://www.kompiajaib.com/2017/05/membuat-ucapan-marhaban-ya-ramadhan.html

Related Post