Senin, 14 Januari 2013

TweetThis Button

Horizontal Scroll Website Menggunakan jQuery

Horizontal Scroll Website Menggunakan jQuery

Saat ini dengan adanya jquery, banyak sekali desain-desain website yang kreatif, keluar dari jalur normal desain web kabanyakan. Kali ini kita akan belajar membuat website menggunakan jquery, di mana website tersebut kontennya akan kita scroll secara horizontal atau menyamping. dengan bantuan CSS, kita bisa mengatur aliran konten ke samping, bukan ke bawah. Seperti ilustrasi di bawah.
Horizontal Scroll Website Menggunakan jQuery
Pada gambar di atas kita lihat terdapat konten yang melebar ke samping melebihi ukuran browser. Dengan bantuan CSS kita bisa menyembunyikan scrollbar yang muncul. Kemudian untuk menampilkan konten yang tersembunyi di samping kita bisa menggunakan jquery. Yuk kita lihat kode-kodenya.

Kode HTML



Home

About me

Contact

Kode CSS
body{
    overflow-x:hidden;
}
#kanvas{
    position:absolute;
    top:0;
    left:0;
    width:4500;
    height:100%;
}
.konten{
    width:1500;
    height:100%;
    float:left;
}
#homekonten{
    background-color:yellow;
}
#aboutkonten{
    background-color:red;
}
#contactkonten{
    background-color:green;
}

#menu{
    position:fixed;
    top:100;
    left:10;
    background-color:blue;
    z-index:1000;
    padding:10;
    cursor:pointer;
}
overflow-x:hidden; kita gunakan untuk menghilangkan scrollbar di browser
position:fixed; kita gunakan supaya menu selalu berada di tempat yang sama

Kode jQuery

Oke sekarang kita buat kode javascript untuk mengontrol menampilkan konten. di jQuery kita menggunakan fungsi scrollLeft() untuk mengscroll konten. Supaya ada efek animasi dalam transisi, maka kita menggunakan fungsi animate(). Yuk kita lihat kodenya:



LIHAT DEMO | Download Source Code

Source : http://blog.codingwear.com/read56-Horizontal-Scroll-Website-Menggunakan-jQuery.drz

0 komentar:

Posting Komentar

.:Tutorial DHTML DLL:.

Tutorial tentang Dhtml scripts, Jquery plugins ,Javascript, CSS, CSS3, Html5 Library dll dan penerapannya pada Website, langsung aja kunjungi Website nya dan yang nggak kalah penting Free Yaa !!

.:distrowatch:.

Pengin Banyak tau tentang distro linux Langsung Aja Kunjungi DistroWatch Hmmm, banyak banget distronya, Download dan Pasang Linuxnya Lets Go Boss !!

.:jQuery Tutorial:.

Tutorial jQuery Widget ada disini semua Langsung Ke TKP Boss !!

.:Hirens Boot CD:.

Hiren's Boot CD cukup ampuh untuk membuat Clonning Atau Copy windows, dan banyak tool yang sangat berguna bagi para teknisi komputer maupun yang masih pemula silahkan Download filenya Disini kalo mau lihat tutorialnya membuat Flashdisc Bootable Disini Lumayan buat nambah ilmu dan Tool, Langsung aja Boss !!

Hiren’s BootCD

Bookmark and Share