Membuat Ucapan Marhaban Ya Ramadhan Dengan Parallax Efek

Sebenarnya saya sudah pernah membuat dua buah tutorial untuk membuat ucapan Marhaban Ya Ramadhan, namun kali ini saya akan membuat ucapan Marhaban Ya Ramadhan dengan efek parallax sehingga berbeda dengan 2 postingan sebelumnya.

Sebentar lagi akan memasuki bulan Ramadhan, maka dari itu admin blog mungkin perlu membuat kata sambutan untuk pengunjung muslim dengan membuat ucapan Marhaban Ya Ramadhan.

Untuk demonya silahkan coba pada link berikut:


Bagi yang tertarik untuk mencobanya silahkan ikuti langkahnya di bawah ini.

Silahkan copy kode CSS dan simpan 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>

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://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>

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.

Jika ingin hanya tampil di halaman tertentu silakan gunakan conditional tags pada CSS, HTML, dan Javascript.

Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser