» » Cara Membuat Ucapan Marhaban Ya Ramadhan Di Blog [Versi Parallax]

Kamis, 18 Mei 2017

Cara Membuat Ucapan Marhaban Ya Ramadhan Di Blog [Versi Parallax]

5/18/2017
Assalamualaikum, tidak terasa sebentar lagi kita akan memasuki bulan suci ramadan pada artikel ini saya akan memberikan tutorial yaitu cara membuat ucapan Marhaban ya ramadhan di blog.

Kita tau kalau bulan ramadan banyak sekali yang menunggu di seluruh belahan dunia termasuk Indonesia, bulan yang penuh berkah dan penuh ampunan ini sangat di nanti. 

Tutorial ini di share oleh kompi ajaib dan saya buat tutorial nya kembali di blog ini. 

Silahkan copy kode CSS dan simpan di atas kode </head>

<style type='text/css'>
/*<![CDATA[*/
.parallax {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgmfarQKuPIgX0BVJaXnpUt0RU-NqaPQ_XX-xw7p_j9ZNKQ1_dGu7dJQXjYoql3Wc5Y4t3J6uluPLVtVInWvrh28OobcJI7nIpLiPl1U8hjvxIzRd2ruy8S9864KFpcV2gv_1RMFnB7qM/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>

Lalu silahkan simpan kode HTML ini di 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/AVvXsEgSU4LO6ZaEbF9R7NvPK1vNFN272cIO0Sp_RlHq__qfMIrrA7uOhk6Yi6YVdHVMKoik6R3ugd_3UAQXarYa6H0xp-2qWZNhLXky4B1owv4WgEoFd457KXYFo35Zc-6YFN18ue9itYaCrYw/s1600/chevron-double-down+%25281%2529.png" /></div>
    <div class="close_parallax" onclick="hideParallax()" title="Close">&amp;times;</div>
  </section>

Lalu simpan kode Javascript ini di 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>

Selesai.
Related Posts