Blog Request tutorial? klik disini!

  • Membuat Effect Scroll Pada Logo

    Ditulis oleh: Faizal Rafik
    631 kali dibaca
    27 Sep / 2014 23:30

    Di tutorial kali ini saya akan mengajarkan bagaimana caranya membuat Effect Animasi Scroll Pada logo menggunakan jQuery. Jadi maksud dari effect animasi ini adalah dimana saat kita scroll halaman website kita, maka kalian akan melihat perubahan warna pada logo jika melewati atau melintasi warna Background atau warna dasar yang memiliki warna yang berbeda-beda. Masih bingung teman-teman dari pada tambah bingung kita langsung buat saja effect nya ya teman-teman.

    Pertama kalian bisa siapkan sebuah logo dengan ukuran berapa saja yang formatnya SVG.

    Kemudain Kalian bisa buat HTML nya seperti gambar dibawah ini :

    Bisa kalian lihat pada gambar diatas setiap image saya bungkus menggunakan tag <div> dan ditambahkan atribut class dengan 2 nama, nama yang pertama saya berikan nama main, nama main untuk mengatur width dan tinggi dari elemen main, sedangkan nama red untuk memberikan background-colornya.

    Selanjutnya CSS nya seperti gambar dibawah ini :

    Dan berikut adalah untuk jQuerynya :

    Untuk file jQuery nya kalian bisa buat file Javascript kemudian kalian save dengan nama SlipScroll.js.

    Kemudian kalian bisa save dan lihat hasilnya.

    Demo | Download






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