Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS / HTML / jQuery / Website

Horizontal Scroll Website Menggunakan jQuery

by Ahmad Rasyid

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.

Horizontal Scroll Website Menggunakan jQuery

Kode HTML

<body>
<div id="menu">
<span class=link id=home>Home</span>
<span class=link id=about>About</span>
<span class=link id=contact>Contact</span>
</div>
<div id="kanvas">
    <div class="konten" id="homekonten">
    <h1>Home</h1>
    </div>
    <div class="konten" id="aboutkonten">
    <h1>About me</h1>
    </div>
    <div class="konten" id="contactkonten">
    <h1>Contact</h1>
    </div>
</div>

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: 

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
    $("#home").click(function(){
        $("body").animate({ scrollLeft: 0},"slow");
    });
    $("#about").click(function(){
        $("body").animate({ scrollLeft: 1500},"slow");
    });
    $("#contact").click(function(){
        $("body").animate({ scrollLeft: 3000},"slow");
    });
});
</script>


Source: http://blog.codingwear.com

SUBSCRIBE