Satu Halaman Website Dinamis dengan Efek Sliding

by Ahmad Najiullah

HTML

<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>

<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>

CSS

#wrap {
  position:absolute;
  top:0px;
  left:0px;
  width:30000px;
  height:1000px;
}

h3 {
  margin:70px 30px;
  font:normal 22px Arial,Sans-Serif;
  color:#fff;
  color:rgba(255,255,255,0.7);
}

.box {
  width:33.33%;
  height:50%;
  float:left;
  background-color:#ccc;
}

#home      {background-color:#2f2f2f;}
#website   {background-color:#00A7E2;}
#fun       {background-color:#EE9A10;}
#about     {background-color:#DD1F8E;}
#skill     {background-color:#620294;}
#contact   {background-color:#84C922;}

ul#nav {
 width:100%;
 height:30px;
 background:#000; 
 position:fixed;
 top:0px;
 left:0px;  
}

ul#nav li {
 display:inline;
 float:left;   
}

ul#nav li a {
 font:bold 10px Arial,Sans-Serif;
 text-decoration:none;
 color:#999;
 display:block;   
 padding:8px 15px;
}

ul#nav li a:hover, ul#nav li a.active {
 color:#fff;
}

JavaScript

//Adding ScrollTo Plugin, Update Size by Window Size

$(function() {
    
   $('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();
    });
    
    $('ul#nav a').click(function () {
        $('a.active').removeClass('active');
        $(this).addClass('active');
                        
        $('html, body').scrollTo($(this).attr('href'), 1000);    
        return false;
    });
    
});

/**
 * jQuery.ScrollTo
 * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Dual licensed under MIT and GPL.
 * Date: 5/25/2009
 *
 * @projectDescription Easy element scrolling using jQuery.
 * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
 * Works with jQuery +1.2.6. Tested on FF 2/3, IE 6/7/8, Opera 9.5/6, Safari 3, Chrome 1 on WinXP.
 *
 * @author Ariel Flesler
 * @version 1.4.2
 *
 * @id jQuery.scrollTo
 * @id jQuery.fn.scrollTo
 * @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements.
 *      The different options for target are:
 *        - A number position (will be applied to all axes).
 *        - A string position ('44', '100px', '+=90', etc ) will be applied to all axes
 *        - A jQuery/DOM element ( logically, child of the element to scroll )
 *        - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc )
 *        - A hash { top:x, left:y }, x and y can be any kind of number/string like above.
*        - A percentage of the container's dimension/s, for example: 50% to go to the middle.
 *       ...