Apakah Anda tahu Parallax? Atau bisa disebut Parallax Scrolling?
Parallax Scrolling ini merupakan hanya efek gambar background yang jika discrolling akan bergerak gambar tersebut. Bukan fixed atau diam.
Untuk contoh bisa Anda lihat salah satu Landing Page saya di :
http://bisniseka.com/onlinepreneur-guide/
atau http://profitecover.com/dropshipping/
Contoh Parallax di Landing Page OnlinePrenenur Guide, lihat background gambarnya yah:
Bisa juga Anda lihat akun profil Google Plus Anda, Anda bisa lihat akun google plus saya: https://plus.google.com/+ekajuliantoarif. Pada bagian gambar covernya jika Anda scroll maka akan bergerak bukan fixed. Lihat contoh di bawah ini dan lihatlah background gambarnya:
Atau Anda bisa lihat akun twitter Anda sendiri, maka akan terlihat efek prallax tersebut.
Kedua Landing Pages dan juga contoh lainnya tersebut pada bagian gambar background headernya jika Anda scrolling kebawah seolah bergerak mengikuti atau melengkung terfokus. Berbeda dengan background Fixed yang jika Anda scrolling maka gambar tersebut akan diam (fixed).
Nah disini saya ingin membagikan caranya. Cara ini bisa Anda praktekan ketika Anda membuat sebuah Landing Page supaya terlihat keren.
Jika Anda telah selesai membuat sebuah Landing Page atau Anda sendiri gak bisa buat Landing Page? Bahaya itu, berarti Anda harus belajar Bootstrap. Bisa Anda ikuti Panduan Bootstrap disini : http://bisniseka.com/produk/
Kok jadi melantur, ayo fokus...
Untuk Anda yang ingin memasang scriptnya. Terlebih dahulu Anda instal Jquerynya.
caranya download terlebih dahulu script jquery.js dan parallax.min.js nya disini:
Download Parallax
Kemudian jika sudah di download, pindahkan ke folder Landing page yang akan Anda buat. Anda jangan ubah nama foldernya yah.😊😊
Taruh script ini di bagian bawah/footer saja.
<script src="js/jquery.js"></script>
<script src="parallax/parallax.min.js"></script>
<script>
$('#cover1').parallax({imageSrc: 'bg123.jpg'});
</script>
<script src="parallax/parallax.min.js"></script>
<script>
$('#cover1').parallax({imageSrc: 'bg123.jpg'});
</script>
Yang saya tandai berwarna merekah yaitu id dari html yang akan dipanggil tersebut. Untuk merubahnya bisa Anda tambahkan id="cover1" pada script htmlnya. Contohnya:
Untuk memanggil gambarnya pada script {imageSrc: ''bg123.jpg} bg123.jpg bisa Anda ganti dengan nama gambar yang akan Anda masukkan. Karena saya memasukkan gambar bernama bg123.jpg jadi nanti background parallaxnya akan tampil gambar bg123.jpg tersebut.
Kemudian jangan lupa di save. Kemudian lihatlah tampilan Landing Pages Anda akan lebih bagus terlihat ada efek Parallax Scrolling.
Yup.. Maaf sekali jika bahasa tutorial saya acak-acakan. Karena saya bukan anak kursusan web desain jadi agak kurang tahu istilah-istilahnya. Silahkan Anda mencoba cara diatas, saya sudah mencobanya dan berhasil,
Jika Anda tidak tahu cara membuat Blog + Infografik gratis. Bisa Anda Ikuti Online Course nya secara Gratis disini, Info Lengkap Isi email Anda
.jpg)
Social Media