Website Horizontal Scroll Menggunakan jQuery

Website Horizontal Scroll Menggunakan jQuery . jQuery merupakan kode yang digunakan untuk menghasilkan aplikasi web desain yang menarik, ban... thumbnail 1 summary

13.18.00

Website Horizontal Scroll Menggunakan jQuery. jQuery merupakan kode yang digunakan untuk menghasilkan aplikasi web desain yang menarik, banyak desain-desain website yang kreatif, disini ada tutorial website yang kontennya akan kita scroll secara horizontal atau menyamping. Dengan bantuan CSS, kita bisa mengatur aliran konten ke samping, bukan ke bawah. Contoh dibawah ini .

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.

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>
</body>

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

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().

<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]