Blog Request tutorial? klik disini!

  • Membuat Effect Fixied Pada Gambar Atau Banner

    Ditulis oleh: Faizal Rafik
    853 kali dibaca
    14 Jun / 2014 21:54

    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.






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155