Membuat Ucapan Marhaban Ya Ramadhan Dengan Parallax Efek

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

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

Untuk demonya silahkan coba pada link berikut:

DEMO

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

Silahkan copy aba-aba CSS dan simpan di atas aba-aba </head>

 <style type='text/css'>
 /*<![CDATA[*/
 .parallax {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwIpWVgr86Z4dCYLy4_I5PQAPyueLmT0YLJa5iWhC99w0XT6nwrmrEyt8F6Rzsk_hv2y8Ai2cOuqzEdu6DDRMAu5SemkSC2ioojGqJnuN6imENUnMOjQb3SdFpyPLfV3rmN4JzFN_QVdU/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 aba-aba HTML ini di bawah aba-aba <body>

 <section class="parallax" id="parallax">
     <h2>Marhaban Ya Ramadhan</h2>
     <p>Selamat menunaikan ibadah puasa, supaya amal ibadah kita diterima Allah SWT, aamiin.</p>
     <div class="arrow_down bounce"><img alt="Membuat Ucapan Marhaban Ya Ramadhan Dengan Parallax Efek Membuat Ucapan Marhaban Ya Ramadhan Dengan Parallax Efek" width="60" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCDoyVqChH4sIIj8_NoG9IymoGcyJeAZ4QlPqcH3Gp4WFQlqPwdy6i1RpyOvV9XkB5Mi2uRQfygEKjBoFKJRXQ7odKnnzV5_jFE2kenhI4rv99iN0x9esMhRTIHP4jANyi0Tea8XU2vQ8/s1600/chevron-double-down+%25281%2529.png" /></div>
     <div class="close_parallax" onclick="hideParallax()" title="Membuat Ucapan Marhaban Ya Ramadhan Dengan Parallax Efek">&amp;times;</div>
   </section>

Lalu simpan aba-aba Javascript ini di atas aba-aba </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.


Sumber https://www.kompiajaib.com/

Share this post