Satu Halaman Website Statis dengan Efek Sliding

Tabel Konten
  1. HTML 
  2. Penerapan jQuery ScrollTo 
    1. Lebih Lengkap: 
One Page Dynamic Website

Setelah sukses mengeset ukuran elemen berdasarkan ukuran layar, sekarang adalah saatnya untuk menciptakan efek smooth scrolling pada halaman. Saya menggunakan plugin jQuery scrollTo untuk mempermudah pengerjaan. Ya, itu benar, karena cukup dengan plugin tersebut, menciptakan efek smooth scrolling dapat dilakukan hanya dengan menuliskannya seperti ini:

$('a').click(function() {
    $('html, body').scrollTo($(this).attr('href'), 1000);
    return false;
});

Lihat Demo Download

HTML 

Buat sebuah berkas HTML dimana jQuery, jQuery scrollTo dan CSS eksternal telah disertakan di dalamnya:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>Demo</title>
        <link rel='stylesheet' href='style.css'>
        <script src='jquery-1.7.1.min.js'></script>
        <script src='scrollTo.js'></script>
        <script>
            $(function() {
                // Pekerjaan kita di sini...
            });
        </script>
    </head>
    <body>

        <!-- halaman -->
        <div id='wrap'>
            <div class='box' id='home'>
                <h3>Home</h3>
            </div>
            <div class='box' id='contact'>
                <h3>Contact</h3>
            </div>
            <div class='box' id='fun'>
                <h3>For Fun</h3>
            </div>
            <div class='box' id='about'>
                <h3>About</h3>
            </div>
            <div class='box' id='website'>
                <h3>Website</h3>
            </div>
            <div class='box' id='skill'>
                <h3>Skills</h3>
            </div>
        </div>

        <!-- navigasi -->
        <ul id='nav'>
            <li><a class='active' href='#home'>Home</a></li>
            <li><a href='#website'>Website</a></li>
            <li><a href='#fun'>For Fun</a></li>
            <li><a href='#about'>About</a></li>
            <li><a href='#skill'>Skills</a></li>
            <li><a href='#contact'>Contact</a></li>
        </ul>
    </body>
</html>

Penerapan jQuery ScrollTo 

Melanjutkan dari kode pada tutorial sebelumnya, di sini Saya telah mengubah script ini:

$('#nav a').click(function() {
    $('#nav a.active').removeClass('active');
    $(this).addClass('active');
});

Menjadi seperti ini untuk menjalankan animasi .scrollTo():

$('#nav a').click(function() {
    $('#nav a.active').removeClass('active');
    $(this).addClass('active');
    $('html, body').scrollTo($(this).attr('href'), 1000);
    return false;
});

Lebih Lengkap: 

$(function() {

    // Hilangkan scrollbar
    $('html, body').css('overflow', 'hidden');

    function updateSize() {
        var winWidth  = $(window).width(),
            winHeight = $(window).height(),
            wrapSum   = $('.box').siblings().length;
        $('#wrap').css({
            width:winWidth*(wrapSum/2),
            height:winHeight*(wrapSum/3)
        });
        $('.box').css({
            width:winWidth,
            height:winHeight
        });  
    } updateSize();
               
    $(window).resize(function() {
        updateSize();
    });

    // Gunakan plugin jQuery scrollTo untuk menciptakan efek smooth scrolling
    $('#nav a').click(function() {
        $('a.active').removeClass('active');
        $(this).addClass('active');
        $('html, body').scrollTo($(this).attr('href'), 1000);

        // Cegah link mengakses halaman dari atributnya
        return false;
    });

});

Tanpa plugin scrollTo, menu masih dapat berfungsi dengan baik untuk meloncatkan halaman/seksi pada pandangan user dengan tepat. Hanya saja, efek animasi tidak akan terjadi. Saya tidak tahu banyak mengenai Mootools. Tapi pada intinya, Mootools dan jQuery adalah dua konsep yang sama:

Mootools = JavaScript Library = jQuery

27 Komentar

  • Anonim

    kok susah si masbroo?

  • Aldi

    maksud dari lebih lengkapnya .. apa yaa masss ??? "bingung" heheh

  • orange.net

    wah,, wah,,
    makin jauh makin mwanteb postingan'a,,
    nanya boleh ya?
    kl saya mo buat tampilan ini di sidebar bisa ga ya?(tidak seukuran layar full)
    ukuran side bar saya widht:723 height:370
    kira2 yang harus diganti dari kode2 dewa diatas apa aja ya?
    terimakasih,, :)
    sukses selalu buat hompimpa

  • Anonim

    mas, sudah bisa cuman kalo kita pengen masang widget atau postinan di page home misal, caranya kaya gimana yah??

  • Taufik Nurrohman

    @sahadena ???
    Pelajari tag kondisional: http://hompimpaalaihumgambreng.blogspot.com/search/label/Tag%20Kondisional
    Ngomong-ngomong, ini tempat komentarnya nggak salah alamat? (hehe) Mungkin harusnya di posting Imageflow, atau Widget Daftar Isi Blogger Bernavigasi.

  • Taufik Nurrohman

    @sahadena Eh, iya, nggak salah ding. Hehe... Hebat bisa nerapin tutorial ini ke template blogspot :p

  • Anonim

    kagokedannn.blogspot.com nah di sana saya udah pasang daftar isi di menu home, nah misal kita klik selengkapnya atau misal mau membaca postingan. tapi ko pas di klik masuknua ke home lagi bukan ke postingan yang kita tuju. gmana tuh?? abis penasaran mas. hehe

  • Taufik Nurrohman

    @sahadena Sebenarnya sih tidak hilang, cuma tertutup tabir saja. Coba kamu tekan tombol panah bawah di keyboard sampai terlihat formulir komentar.

  • Ijal Fauzi

    Thanks mas, saya udah terapin. Cuma tutorial ini kurang deh, itu link jquery sama scrollto nya dikasih aja, jangan cuma "scrollTo.js".

  • Taufik Nurrohman

    @Ijal Fauzi Iya, Saya tahu betul mengenai hal yang dikhawatirkan akan membuat mereka menjadi tidak bisa menerapkan dengan cara salin dan tempel :( Tapi Saya justru jauh lebih khawatir jika sampai mereka salah paham mengenai apa itu JavaScript dan apa itu script eksternal. Seperti yang sering Saya temui bahwa kebanyakan dari mereka hanya tahu bahwa yang dinamakan sebagai JQuery adalah sebuah elemen <script> yang mengarah kepada URL http://ajax.googleapis.com/ajax/libs ... dst, padahal bukan itu yang menentukan bahwa apa yang Anda lihat adalah JQuery atau bukan. Direktori JQuery tidak hanya ada pada Google, Situs dokumentasi JQuery, bahkan Microsoft juga mempunyai pemuat file tersendiri. Andaipun Saya menuliskan URL asli dari plugin JQuery scrollTo, misalnya seperti ini:

    <script src='http://hompimpa.googlecode.com/files/jquery.scrollTo.js' type='text/javascript'></script>

    Saya khawatir mereka akan menganggap bahwa yang dinamakan sebagai JQuery .scrollTo() adalah http://hompimpa.googlecode.com/files/scrollTo.js
    Lalu bagaimana jika Saya sampai menghapus file tersebut dari direktori Google Code Saya?
    Mereka bisa kehilangan akal karena mengira bahwa script tersebut tidak bekerja, padahal itu terjadi karena Saya telah menghapusnya.
    Tidak ada hal lain yang bisa Saya lakukan tentang bagaimana cara memberitahu mereka mengenai JavaScript eksternal ini. Saya lebih suka membiarkan mereka belajar sendiri dan menemukan bahwa beginilah yang dinamakan sebagai file eksternal dan internal dan beginilah cara kita menerapkannya.
    Dan lagipula, posting ini masuk ke dalam kategori Tingkat Lanjut: http://hompimpaalaihumgambreng.blogspot.com/search/label/Tingkat%20Lanjut

  • Ijal Fauzi

    @Taufik Nurrohman Iya, betul banget mas. Dengan begitu, si pengguna pasti bertanya kenapa ngga bekerja, hahaha. Ide yang bagus untuk membangun sebuah diskusi didalam postingan.

    Saya sendiri langsung nyari scrollTo nya, dan akhirnya bisa saya terapkan.

  • Randy

    Ternyata ini yg saya cari2 hehe,thanks mas,mau saya kembangin lagi boleh kan?sebagai uji coba juga hehe

  • Unknown

    Ternyata saya menemukannya disini tapi udah tingakat lanjut, huff... :'( mau mulai dari mana nich setelah mereset templete dengan Eric mayer jadi binggung...

  • Dixy

    Komentar ini telah dihapus oleh pengarang.

  • Unknown

    Komentar ini telah dihapus oleh pengarang.

  • KMKO Sipil Unhas

    bisa nga kalo menu-menunya itu (website, for fun, about.....)
    isinya itu langsung blog kita yang lain???

    terima kasih

  • sepotong senja

    saya mau tanya untuk memasukan content ke dalam halapan tiap2 webnya bagaimana

  • ÷4-p-5-c-0-d-3÷

    http://flesler.blogspot.com/2007/10/jqueryscrollto.html>>>>>>LIAT TAHUN POSTINGNYA
    http://demos.flesler.com/jquery/scrollTo/

    TELAT

  • ÷4-p-5-c-0-d-3÷

    INI LAGI
    http://tympanus.net/Development/FullscreenLayoutPageTransitions/

    GO......................................

  • barkah

    mantap ni,,, thx berat nee,,, :-bd

  • Unknown

    Bermanfaat sekali, Terima Kasih admin.

    gua mau tnya kalau seumpama sliding nya ke kanan terus gimana ya ?
    Butuh Replynya. mkasih..

  • Unknown

    kang, nuhun nih kan udah saya utak atik nih, tapi kenapa kalau mau pergi ke halaman skill, larinya malah ke halaman home. kalau skillny saya apus tatanannya jadi error, seakan - akan skill ini ada cuma ilang gitu. nuhun.

    • Taufik Nurrohman

      Tidak bisa, soalnya pembagiannya sudah dibuat baku di sini:

      $('#wrap').css({
      width:winWidth*(wrapSum/2),
      height:winHeight*(wrapSum/3)
      });

      Bisa dicoba diutak-atik di bagian itu.

  • Unknown

    jadi seandainya background itu di isi dengan gambar bisa tidak mas?

  • Unknown

    keren gan animasinya.
    kak dolop

Komentar telah ditutup.