Skip to main content

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh970Eymbxweq25k4lvaYJCSjLJKixbd3EvrVMP3yN2kwYfXBvn9-1Xfv0-4cgvqKTR-9ONIz8W3WtnbdLL8A8BgFqiUB2UWdJC420zJI2DE581SyG37wLiD6DOIlCpfw3RkTAACImHLZg/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/AVvXsEhnCOkTi_fynO1sYJ5nPz5HI4fzpucyzcMEIWUkcjVBX_GRCoNOPmPXUXMg_DIIdye5wj_p2mcqAaYSVTCxbV5QzUyOb5_O-sk0kytEx2J2mVZw-r8e-H2fTJVpUl4yMy23BerZdBBg6z8/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.

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

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB