Cara membuat efek paralaks di tema blogger terbaru - Mengelola Blog

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.

efek paralaks tema blogger terbaru

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

efek paralaks scrolling

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

8 comments:

  1. Biar efeknya kelihatan harus pake background gambar dulu ya mas?

    ReplyDelete
    Replies
    1. Iya mas, biar kelihatan bedanya ya bagusnya pakai gambar, kalau warna biasa sebenernya juga bisa cuma kan ngga jelas bergerak atau tidak.

      Delete
  2. bisa juga diaplikasikan pada tulisan di blog atau pada widget yang ada, postingan hehe

    ReplyDelete
  3. Pengaruh tidak ya sama loading blog?? Kira-kira kalau pengaruh besar gak yah efeknya?

    ReplyDelete
    Replies
    1. Pengaruh mas, karena pakai script dari luar template, cuma seberapa besarnya saya belum pernah cek

      Delete
  4. ada yang punya rekomendasi download template parallax yang bisa langsung diaplikasikan ke blog ngga ya? suwun

    ReplyDelete
    Replies
    1. Sampai saat ini saya belum ada rekomendasi mba, sudah coba cek di penyedia template gratisan belum ?

      Delete