dengan bantuan CSS, kita bisa mengatur aliran konten ke samping, bukan ke bawah. Seperti ilustrasi di atas
ini kode htmlnya
<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>
dan ini code Cssnya
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;
}
dan ini jquerynya .
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>
Posting Komentar