jQuery merupakan salah satu library javascrip populer yang banyak digunakan saat ini. Dengan adanya jquery, banyak sekali desain-desain website yang dibuat sangat interaktif dan kreatif, yang umumnya keluar dari jalur normal desain web kebanyakan.
Pada tutorial ini kita akan belajar membuat website menggunakan jquery, di mana setiap kontennya dapat di scroll secara horizontal atau menyamping. Untuk detailnya silahkan lihat demo di bawah.
Pada demo diatas dapat kita lihat setiap konten yang dipilih akan ditampilkan secara menyamping (horizontal scroll). Cara kerjanya cukup sederhana, sebenarnya semua konten di tampilkan melebar ke samping melebihi ukuran browser. Dengan bantuan jQuery konten yang ditampilkan hanya yang terpilih (satu halaman saja) dan konten lainnya disembunyikan. Serta menggunakan bantuan CSS kita dapat menyembunyikan scrollbar vertical standar web browser.
Penasaran ? Berikut langkah pembuatan Horizontal Scroll Website Menggunakan jQuery.
Baca juga :
– Mengatasi Konflik Plugin jQuery
– Dynamic Select Box Menggunakan jQuery dan Ajax
– Membuat Fitur Live Check Email dengan jQuery
Langkah 1 – Membuat Kode HTML
Menggunakan HTML buatlah div untuk menu dan kontent setiap halaman.
<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="container">
<div class="content home" id="home">
<h1>Home</h1>
</div>
<div class="content about" id="about">
<h1>About</h1>
</div>
<div class="content contact" id="contact">
<h1>Contact</h1>
</div>
</div>
</body>
Langkah 2 – Tambahkan Desain CSS
Selanjutnya tambahkan kode CSS.
body{
overflow-x:hidden;
font-family: 'Open Sans', sans-serif;
}
h1 {
padding-left: 30px;
}
#container{
position:absolute;
top:0;
left:0;
width:4500;
height:100%;
}
.content{
width:1500;
height:100%;
float:left;
}
.home{
background-color:#85E4C4;
}
.about{
background-color:#5CC0C6;
}
.contact{
background-color:#F16E64;
}
#menu{
position:fixed;
top:100;
left:40%;
background-color:#728280;
z-index:1000;
padding:10px;
cursor:pointer;
border-radius:3px;
}
.link {
padding: 0 5px;
color: #ffffff;
}
Kode jQuery
Terakhir tambahkan perintah jQuery untuk mengontrol setiap konten agar dapat di tampilkan secara horizontal. Fungsi scrollLeft() digunakan untuk meng-scroll konten ke kiri. Tambahkan pula efek animasi transisi menggunakan fungsi animate().
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.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>
Selamat mencoba.
