DTE :]

Monday, January 16, 2012

Satu Halaman Website Statis dengan Efek Sliding

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

Labels: , ,

posted by Taufik Nurrohman at January 16, 2012

27 Comments:

Post a Comment



<< Home