Membuat Ucapan Marhaban Dengan Efek Parallex

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Membuat Ucapan Marhaban Dengan Efek Parallex, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, CSS, Desain Blog, Javascript, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjmp6NwZQftcexWFc4sQLea-wAOk74ndjC8duumz-XHz1s_0uFlEaGJmtntIABDhp0iBj_TZAPIhyMqegt8ZOVAwg3YyeeQMGdOn-RAWW86xGMTup38AFpBPRJO8P-2t-8WAuJmIz81vc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8fYv96vR1aQbizCrg2eNyk2lw_fIj9HHmALtd2GirEaffkbmXPU7L00epH2IkTxqgYkAfX4IgHpy21Ve4THwIZjqhzebIg-Sv7_7NvF0uH4qL_1PkvDbymHYVv7ARv9ZJOV1hxOwuzd0/s1600/chevron-double-down+%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

Baca Juga

Demikianlah Artikel: Membuat Ucapan Marhaban Dengan Efek Parallex

kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Ucapan Marhaban Dengan Efek Parallex dengan alamat link https://blog-kita-semuaa.blogspot.com/2017/05/membuat-ucapan-marhaban-dengan-efek.html

Share :