Halaman

    Social Items

Membuat Ucapan Ramadhan dengan Efek Parallax

Sebelumnya saya sudah pernah buat tutorial membuat ucapan ramadhan di blog ini, silahkan bisa dicek dan dipilih mana yang sesuai dengan blog kamu.

Sekarang saya mau kasih tutorial lagi cara Membuat Ucapan Ramadhan dengan Efek Parallax. Apa itu efek parallax? langsung aja lihat demonya yah.


Jika kamu tertarik ingin menggunakan efek parallax ini, langsung aja ikutin tutorial di bawah ini yah

Membuat Ucapan Ramadhan dengan Efek Parallax


1. Log in Blogger -> Tema -> Edit HTML -> Cari kode </head> -> salin kode di bawah ini dan letakkan tepat di atas kode tersebut

<style type='text/css'>
/*<![CDATA[*/
.parallax {
  background: url(https://4.bp.blogspot.com/-oIjQYTvFZm4/XDQvOjsqPBI/AAAAAAAAAIo/9n3IufuhS4QJ6gAoFLd6gj5y5B8iBSZVwCLcBGAs/s1600/ramadhan-kareem.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>

2. Selanjutnya cari kode <body> -> salin HTML di bawah ini dan letakan di bawah kode tersebut

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

3. Lalu cari kode </body> -> Salin kode di bawah ini tepat di atas kode tersebut

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

4. Simpan Template, dan lihat hasilnya

Silahkan edit pada tanda yang sudah saya Mark dan bisa kamu ganti dengan gambar sesuai dengan yg kamu inginkan, pada demo saya menggunakan ukuran gambar 812px x 568px

Sumber = www.kompiajaib.com

Membuat Ucapan Ramadhan dengan Efek Parallax

Membuat Ucapan Ramadhan dengan Efek Parallax

Sebelumnya saya sudah pernah buat tutorial membuat ucapan ramadhan di blog ini, silahkan bisa dicek dan dipilih mana yang sesuai dengan blog kamu.

Sekarang saya mau kasih tutorial lagi cara Membuat Ucapan Ramadhan dengan Efek Parallax. Apa itu efek parallax? langsung aja lihat demonya yah.


Jika kamu tertarik ingin menggunakan efek parallax ini, langsung aja ikutin tutorial di bawah ini yah

Membuat Ucapan Ramadhan dengan Efek Parallax


1. Log in Blogger -> Tema -> Edit HTML -> Cari kode </head> -> salin kode di bawah ini dan letakkan tepat di atas kode tersebut

<style type='text/css'>
/*<![CDATA[*/
.parallax {
  background: url(https://4.bp.blogspot.com/-oIjQYTvFZm4/XDQvOjsqPBI/AAAAAAAAAIo/9n3IufuhS4QJ6gAoFLd6gj5y5B8iBSZVwCLcBGAs/s1600/ramadhan-kareem.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>

2. Selanjutnya cari kode <body> -> salin HTML di bawah ini dan letakan di bawah kode tersebut

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

3. Lalu cari kode </body> -> Salin kode di bawah ini tepat di atas kode tersebut

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

4. Simpan Template, dan lihat hasilnya

Silahkan edit pada tanda yang sudah saya Mark dan bisa kamu ganti dengan gambar sesuai dengan yg kamu inginkan, pada demo saya menggunakan ukuran gambar 812px x 568px

Sumber = www.kompiajaib.com

No comments

Silahkan komentar sesuai dengan topik yang di bahas sesuai artikel