Agen Terpercaya   Advertise
 
 
 
Pasang iklan, hanya lewat Contact Us.
Waspada penipuan iklan. Klik di sini untuk melihat daftar penipu.

Horizontal Scroll Web [JQ] [DEMO][DOWNLOAD]

RayMantic

Moderator
Staff member
Moderator
Daftar
4 Oct 1988
Post
×
Like diterima
9.211
Bimabet
LINK
DEMO
DOWNLOAD

Langkah 1 – Membuat Kode HTML
Menggunakan HTML buatlah div untuk menu dan kontent setiap halaman.
Code:
<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.
Code:
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;
}

***** {
    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().
Code:
<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>
 
Jav Toys
Gaple Online Indonesia
Pasang iklan hanya lewat CONTACT US
Back
Top
We are now part of LS Media Ltd