Cara Membuat Parallax Background Scroll Pada Blogger - Kang Iyan

Cara Membuat Parallax Background Scroll Pada Blogger

Apa itu Parallax Scrolling ? sebuah trend baru pada website modern dimana konten background (gambar) bergerak mengikuti dengan kecepatan sama sesuai saat men-scrolling. Bisa dilakukan dengan CSS. Jika kamu orang baru mendengar istilah atau belum tau dasarnya.

Untuk mempelajarinnya kamu dapat belajar di Web W3scools disana terdapat untuk membuat Parallax Scrolling tapi saya juga mau membagikan cara untuk membuat Parallax Scrolling ini jadi, kamu enggak perlu ke W3scools kamu bisa mempelajarinnya disini juga.

Cara Membuat Parallax Background Scroll Pada Blogger

Untuk membuat sebuah Parallax Scrolling kamu dapat menggunakan CSS atau JS , mungkin kamu sudah pernah melihat Parallax Scrolling di web atau jika belum buka saja Google Drive pasti ketika kamu melakukan Scrolling gambar pada Google Drive mengikuti scroll kamu.

Untuk membuatnya kamu dapat menggunakan Notepad ++ atau Sublime Text3 coba saja pakai apa pun juga bisa mau menggunakan Notepad biasa juga bisa, jika sudah membukannya langkah selanjutnya yaitu membuat kodenya yaitu seperti dibawah ini.

Kode CSS
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 */
      }
}

Pemanggilan Kode CSS
<div class='image1'>
  <h2>Scroll Down</h2>
</div>
<div class='isi1'>
  <h2>Parallax Scrolling</h2>
Parallax Scrolling adalah sebuah trend baru pada website modern dimana konten background (gambar) bergerak mengikuti dengan kecepatan sama sesuai saat men-scrolling. Bisa dilakukan dengan CSS.
</div>

Untuk melihat Demonya dapat di lihat dibawah ini

See the Pen Parallax Scrolling by Kang Iyan (@KangIyan) on CodePen.


Untuk yang selanjutnya kita akan menambahkan Jqueri pada Smooth Parallax nya kamu dapat membuat nya seperti ini jika pusing saat membuat Jquerinya saya sarankan lebih baik belajar JS dulu karena agak memusingkan jika belum tahu.

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

See the Pen Parallax With Jquery by Kang Iyan (@KangIyan) on CodePen.

Nah itulah beberapa cara untuk membuat Parallax Scrolling yang dapat kamu coba sendiri, bila bagus kamu dapat berkomentar di blog ini dan juga bila binggung saya akan menjawab pertanyaan agar kodenya dapat berjalan :D

Artikel Terkait

Cara Membuat Parallax Background Scroll Pada Blogger
4/ 5
Oleh

Komentar Ada Dibawah

  1. Makasih gan source codenya bisa saya pake

    ReplyDelete
    Replies
    1. sama sama gan, dicoba dan kreasikan saja biar semakin bagus :D

      Delete