Cara membuat efek parallax di blogspot

Kali ini saya akan memberikan tutorial cara membuat efek parallax pada template blogspot sobat, silahkan disimak...

1. Masukkan kode css dibawah ini dan taruh di atas </head>

body{height:100%}
.image1{
width:100%;
height:100%;
background-image: url(link gambar.jpg);
background-size: cover;
/* Agar tampilan gambar tetap proposional dengan ukuran layar */
background-position:center;
/* Posisi gambar ditengah */
background-attachment: fixed;
/* Ini lah yang membuat gambar dapat di scroll */
background-repeat: no-repeat;
/* Cocok untuk gambar besar agar tidak ada perulangan */
}
.isi1{
width:100%;
padding: 50px 15px;
/* Membuat tulisan berada ditengah elemen konten dan efek tinggi otomatis.*/
}
@media screen and (max-width:1024px) {
.image1{
background-attachment: scroll;
/* Mematikan efek dengan, layar yang dibawah resolusi 1024px */
      }
}

2. Masukkan kode javascript dibawah ini dan taruh di atas kode </body>

 <script type='text/javascript'>
$(document).ready(function() {
  $(window).scroll(function() {
    var scr = $(document).scrollTop() / 10; // Angka 10 lebih kencang, 100 = tidak bergerak
    $(".image1").css('background-position', '50% '+scr+'%');
    // Selector yang dipilih .image1, sesuaikan dengan css yang kamu buat
  });
});
</script>

3.Untuk pemanggilnya taruh di antara widget yang ingin sobat berikan efek parallax dengan kode dibawah ini

 <div class='image1'>
  <h2>Scroll Down</h2>
</div>
<div class='isi1'>
  <h2>Efek Parallax</h2>
Efek parallax
</div>

Selamat mencoba semoga berhasil!

Gambar : babastudio.com

Baca Juga

Josie

Cuma seorang blogger yang jarang ngeblog

Share :

Related Posts