Cara Membuat Parallax Background Scroll Pada Website Dan Blogger

MintaIlmu.com – Cara Membuat Parallax Background Scroll Pada Website Dan Blogger – Disini sekarang saya mau berbagi informasi tentang bagaimana cara membuat Parallax Background Scroll pada blog atau website mu.

Apa itu Parallax Scroll ? 
Parallax Scroll adalah efek yang ada pada blog atau website ketika kita melakukan scroll pada sebuah halaman website atau blogger. pada tahun 2018 ini Parallax Scroll merupakan sebuah trend baru pada website dan blog modern dimana konten yang dimiliki pada background(gambar) bergerak mengikuti kecepatan yang sama sesuai dengan saat kita melakukan men-scrolling. Bisa kita buat menggunakan CSS, JS dan HTML.

Untuk membuat sebuah tampilan Parallax Scroll kita bisa memasukan script CSS, JS dan HTML, buat kamu yang blum paham tentang Pemograman, kamu bisa belajar pada W3school, atau kamu juga bisa belajar di blog saya ini.

Cara Membuat Parallax Background Scroll Pada Website Dan Blogger
1. Buka Text Editor anda pada blog atau website (Boleh juga langung buka Sublime Text, Atom, Notpad)
2. lalu masukan script berikut ini pada website atau blog mu :

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

3. untuk pemanggilan dari kode css diatas kamu masukan kode HTML berikut ini :

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

4. Langkah yang selanjutnya kita akan memasukan script Jqueri pada Parallax kamu, dengan code berikut ini :

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

5. Coba Save dan lihat hasilnya.

saya mendapatkan script ini dari berbagai website, jadi saya lupa website pada yang saya kunjungi saat membuat script ini. thanks.