Dalam membuat website, design sangatlah penting dengan perkembangan css yang begitu signifikan pada era ini, kita sebagai developer website harus dituntut untuk terus berkembang,
terbukti dengan banyaknya propertis baru updetan dari CSS3 yang sudah mendukung banyak fitur animasi seperti transition, @keyframe dan lainnya.
Kita sebagai developer website juga perlu memahami plugin-plugin yang berguna untuk membuat website kita lebih interaktif seperti jquery, javascript dan lainnya, mengapa kita perlu menguasai javascript, karena dengan menggunakan javascript kita dapat membuat animasi yang tidak bisa kita buat dengan terbatasnya fitur css.
Dan pada kesempatan kali ini saya akan mencoba satu studi kasus dasar pembuatan efek parallax dengan background-attachment css utuh, tanpa menggunakan plugin sama sekali, untuk lebih jelasnya kita langsung saja praktekan, silahkan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>basic parallax</title> </head> <body> <section class="parallax1"> <h1>Dumet School</h1> </section> <section class="parallax2"> </section> <section class="parallax3"> <h1>Dumet School</h1> </section> </body> </html> |
Script diatas saya membuat 3 buah area menggunakan element section, setelah itu teman-teman bisa save, lalu kita akan atur CSSnya, silahkan teman-teman ketikan script CSS berikut ini :
|
1 2 3 4 5 6 7 |
<style> *{margin:0; padding:0;} .parallax1{height:300px; background:red;} .parallax2{height:300px; background:url(background.jpg); background-size: cover; background-attachment: fixed} .parallax3{height:300px; background:blue;} </style> |
Pada script diatas saya mengatur masing-masing element section dengan background warna lalu pada section dengan class parralax2 saya memberikannya background gambar serta saya menggunakan background attachment fixed yang berfungsi untuk membuat area dengan class parallax2 menjadi fixed, dan jangan lupa ya teman-teman siapkan 1 gambar yang akan kita jadikan background pada salah satu area sectionnya, jika sudah silahkan teman-teman silahkan save dan coba jalankan pada browser, jika sudah maka hasilnya akan seperti berikut ini:
Setelah itu teman-teman coba scroll pada bagian websitenya, gimana? cukup mudah bukan? untuk tutorial kali ini tentang dasar pembuatan efek parallax dengan background-attachment css cukup sampai disini dulu, semoga tutorial kali ini bermanfaat, sampai bertemu pada tutorial berikutnya.
Terimakasih