Membuat Effect Fixied Pada Gambar Atau Banner

14/06/2014    Faizal Rafik    3955    Website

Pada tutorial kali ini saya ingin mengajarkan bagaimana caranya membuat effect Gambar atau Banner Fixied pada hedear. Maksud dari Effect tersebut adalah effect dimana saat kita scroll pada sebuah halaman website maka banner atau gambar yang terdapat di bawah header secara perlahan akan terlihat menghilang atau tertutupi oleh halaman content yang berada diatas gambar atau banner tersebut. Jadi saat kita scroll halaman website tersebut gambar atau banner tersebut akan diam atau tidak ikut bergerak. Masih bingung ya teman-teman, Baiklah dari pada tambah bingung mari kita langsung praktekkan saja ya teman-teman.

Pertama teman-teman bisa buat file HTML nya seperti dibawah ini :

Lalu CSS nya seperti dibawah ini :

Bisa dilihat diCSS tersebut terdapat property CSS position: fixied dimana position: fixied tersebut saya letakan di id logo, main, dan banner untuk mempertahankan posisi header dan banner pada posisinya jadi saat kita scroll halaman website tersebut header dan banner tersebut tidak ikut ke scroll. Nah ada satu property CSS lagi yang menentukan effect ini berjalan atau tidak yaitu property z-index, fungsinya adalah untuk memposisikan layer header berada diatas gambar tersebut dan content juga berada di atas gambar tersebut jadi posisi gambar atau banner berada dibelakang layer header dan content.

Untuk hasilnya akan terlihat seperti gambar dibawah ini :

Mudahkan teman-teman, sekian dulu tutorial dari saya, semoga bermanfaat untuk teman-teman. Terima Kasih

DOWNLOAD SOURCE.

No data.