Cara membuat efek paralaks di tema blogger terbaru

Tema Blogger terbaru menjadi magnet tersendiri buat saya saat ini, terlebih karena desainnya yang cukup menarik serta berkesan elegan. Meskipun saya belum menerapkannya di blog ini karena beberapa alasan, namun tidak menyurutkan niat saya untuk iseng mencoba-coba pada tema-tema terbaru blogger ini.

Seperti yang sudah pernah saya sampaikan pada artikel sebelumnya bahwa ada 2 template terbaru blogger yang desainnya menarik untuk digunakan yaitu contempo dan emporio.

Pada artikel kali ini, kita akan mencoba untuk membuat background foto pada template contempo dan emporio agar bisa memiliki efek paralaks saat di scrolling (gulir) kebawah.

Apa itu efek paralaks ?

Dalam dunia desain web dan blog, efek paralaks ini sempat booming di antara tahun 2014-2016. Paralaks sering didefinisikan sebagai "pergerakan yang tampak" dari sebuah objek terhadap latar belakang yang jauh akibat pergeseran perspektif (wikipedia).

Sederhananya, paralaks merupakan pergeseran yang tampak dari suatu obyek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat, silahkan Anda perhatikan gambar animasi dibawah berikut


Pada gambar animasi diatas, tampak bahwa obyek yang dilihat memiliki tampilan background (latar belakang) yang bergerak sesuai dengan pergeseran sudut pandang yang terjadi pada pengamat, efek inilah yang dikenal dengan paralaks.

Tujuan yang diharapkan dengan adanya efek paralaks ini pada umumnya adalah untuk meningkatkan pengalaman pengguna yang lebih interaktif dibanding dengan desain web sebelumnya.

Pada artikel kali ini, kita akan memodifikasi background photo pada tema baru blogger yaitu Contempo dan Emporio agar memiliki efek paralaks. Simak langkahnya seperti dibawah berikut ini.

Cara membuat efek paralaks di background template blogger terbaru

1. Login ke blogger.com
2. Pilih blog yang akan di update
3. Pada menu disisi kiri pilih layout
4. Pilih add a gadget
5. Pilih HTML/Javascript
6. Copy dan Pastekan Kode dibawah berikut
   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

   <script src='https://cdn.rawgit.com/markdalgleish/stellar.js/master/jquery.stellar.min.js'></script>

   <script>

   $('.bg-photo').attr('data-stellar-background-ratio', '0.5');

   $(window).stellar({horizontalOffset: 0});

   </script>

7. Lanjutkan dengan mengklik save untuk menyimpan perubahan
8. Silahkan lihat blog Anda dan perhatikan efek paralaks yang terjadi pada foto yang digunakan sebagai background.

Catatan
Untuk mengatur kecepatan geser tampilan pada background, ubah angka yang berwarna merah (0.5). Jika Anda ubah menjadi nilai 1 maka efek paralaks akan hilang, dan jika Anda isi dengan angka 0, maka gambar akan diam.


Kesimpulan

Efek paralaks memberikan pengalaman pengguna yang lebih interaktif saat berada di blog Anda, selain itu juga akan membuat desain blog Anda menjadi lebih keren dan berkesan modern.

Pemasangannya pun cukup mudah untuk Anda lakukan sehingga jika Anda tidak membutuhkannya, maka akan lebih mudah untuk menghapusnya.

Efek paralaks ini sudah saya coba dan berhasil pada template tema emporio (bekerja pada halaman postingan) dan juga pada tema contempo, sedangkan untuk tema lainnya saya belum mencobanya.

Demikianlah artikel cara membuat efek paralaks di background template blogger terbaru ini bisa saya sampaikan, Semoga bisa bermanfaat.

Referensi kode dan script : 
https://so-how-do-i.blogspot.co.id/2017/03/add-parallax-effect-to-contempo.html