You are on page 1of 5

ikatlah ilmu dengan menuliskannya

Tutorial Parallax Layer


Scrolling Dengan JavaScript
Sara Famayla Florentin
sarafamayla@gmail.com

Tutorial Parallax Layer Scrolling Dengan


JavaScript by Laboratorium ICT Terpadu is
licensed under a Creative Commons AttributionNonCommercial-ShareAlike 4.0 International
License.

Pendahuluan

ikatlah ilmu dengan menuliskannya


Javascript adalah bahasa pemrograman berbasis java yang merupakan interface
pembantu dalam pemrograman web.
Bersifat Client Side Programming Language yang berarti pemrosesannya
dilakukan oleh client.
Ini adalah contoh sederhana dalam penggunaan javascript.
1. Buat struktur codingan awal seperti ini.
ketik pada tag <style></style > seperti dibawah untuk memberikan
background pada keseluruhan halaman dengan foto atau gambar yang
diinginkan.
bg.jpg : bg adalah nama dari gambar,sedangkan jpg adalah tipe dari foto
atau gambar itu

ikatlah ilmu dengan menuliskannya


2. Buat content pada tag <body></body>,buat seperti contoh didalam kotak
merah.
Bisa diisi juga dengan content yang diinginkan.

3. Berikan tempat dengan gambar yang mau diberikan effect parallax di


dalam tag <body></body>.
Berikan codingan pada tag <style></style> untuk memunculkan
gambar1.
-Background:url(pn10.gif) no-repeat 0px 200px;
0px=jarak object dari sisi sebelah kirinya sedangkan 200px=jarak object
dengan bagian atas

ikatlah ilmu dengan menuliskannya


4. Tambahkan pada tag script seperti yang dikotak merah.
Window.addEventListener(scroll,parallax,false);
Scroll:parameter
Parallax:nama code yang mau dijalankan

5. tambahkan javascript seperti dibawah untuk membuat gambar bergerak


dari kanan ke kiri setiap di scroll ke bawah

ikatlah ilmu dengan menuliskannya

Penutup

Tentang Penulis
Sara Famayla Florentin adalah mahasiswa Teknologi
Informasi Universitas BUDI LUHUR, selain kuliah saya aktif
pada Laboratorium ICT Terpadu Universitas BUDI LUHUR
.Saya
dapat
dihubungi
melalui
email
sarafamayla@gmail.com