Scribd Logo
Unggah

Selamat datang di Scribd!

  • One Webpage Move Content

    Diunggah oleh

    Kera Ngalam
    10 tayangan3 halaman
    web

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    web

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    10 tayangan3 halaman

    One Webpage Move Content

    Diunggah oleh

    Kera Ngalam
    web

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    Satu Halaman Website Statis dengan Efek Sliding

    Senin, 16 Januari 2012


    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
    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' type='text/css'>
    <script src='jquery-1.7.1.min.js' type='text/javascript'></script>
    <script src='scrollTo.js' type='text/javascript'></script>
    <script type='text/javascript'>
    $(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
    Ke atas!

    Anda mungkin juga menyukai