이군의 스크롤 에니메이팅!

<section>
    <header id="home">
        <h1>이군의 스크롤 에니메이팅!</h1>
        <p>코드가 단순해요 -_-b</p>
        <nav>
            <ul>
                <li class="menu01"><a href="#home">home</a></li>
                <li class="menu02"><a href="#c01">A</a></li>
                <li class="menu03"><a href="#c02">B</a></li>
                <li class="menu04"><a href="#c03">C</a></li>
                <li class="menu05"><a href="#c04">D</a></li>
            </ul>
            <select class="delay">
                <option>500</option>
                <option>1000</option>
                <option>2000</option>
                <option>3000</option>
            </select>
            <select class="easing">
                <option>easeOutBounce</option>
                <option>easeInQuad</option>
                <option>easeOutQuad</option>
                <option>easeInOutQuad</option>
                <option>easeInCubic</option>
                <option>easeOutCubic</option>
                <option>easeInOutCubic</option>
                <option>easeInQuart</option>
                <option>easeOutQuart</option>
                <option>easeInOutQuart</option>
                <option>easeInQuint</option>
                <option>easeOutQuint</option>
                <option>easeInOutQuint</option>
                <option>easeInSine</option>
                <option>easeOutSine</option>
                <option>easeInOutSine</option>
                <option>easeInExpo</option>
                <option>easeOutExpo</option>
                <option>easeInOutExpo</option>
                <option>easeInCirc</option>
                <option>easeOutCirc</option>
                <option>easeInOutCirc</option>
                <option>easeInElastic</option>
                <option>easeOutElastic</option>
                <option>easeInOutElastic</option>
                <option>easeInBack</option>
                <option>easeOutBack</option>
                <option>easeInOutBack</option>
                <option>easeInBounce</option>
                <option>easeOutBounce</option>
                <option>easeInOutBounce</option>
            </select>
        </nav>
    </header>
    <article id="c01">
        <div>
            <h1>제목A</h1>
            <p>제목A 컨텐츠입니다. 제목A 컨텐츠입니다. 제목A 컨텐츠입니다. 제목A 컨텐츠입니다. 제목A 컨텐츠입니다. 제목A 컨텐츠입니다. </p>
        </div>
    </article>
    <article id="c02">
        <div>
            <h1>제목B</h1>
            <p>제목B 컨텐츠입니다. 제목B 컨텐츠입니다. 제목B 컨텐츠입니다. 제목B 컨텐츠입니다. 제목B 컨텐츠입니다. 제목B 컨텐츠입니다. </p>
        </div>
    </article>
    <article id="c03">
        <div>
            <h1>제목C</h1>
            <p>제목C 컨텐츠입니다. 제목C 컨텐츠입니다. 제목C 컨텐츠입니다. 제목C 컨텐츠입니다. 제목C 컨텐츠입니다. 제목C 컨텐츠입니다. </p>
        </div>
    </article>
    <article id="c04">
        <div>
            <h1>제목D</h1>
            <p>제목D 컨텐츠입니다. 제목D 컨텐츠입니다. 제목D 컨텐츠입니다. 제목D 컨텐츠입니다. 제목D 컨텐츠입니다. 제목D 컨텐츠입니다. </p>
        </div>
    </article>
    <footer>
        <address>e2goon앳gmail.com</address>
    </footer>
</section>

HTML

$(function() {
    //동작 이벤트
    $('nav a').bind('click', function() {
        var offset = $(this.hash).offset();
        return scrollAnimate(offset.top);
    });
})

//onload 시 함수 실행
$(window)
    .load(navFixed)
    .load(scrollActive);

//스크롤 에니메이션
function scrollAnimate(offsetTop) {
    var delay = Number($('select.delay option').filter(':selected').val())
      , easing = $('select.easing option').filter(':selected').val();

$('html, body').stop().animate({
        scrollTop: offsetTop
    }, delay, easing);
}

//스크롤 시 버튼 활성화
function scrollActive() {
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var index = Math.round(scrollTop / $(window).height());
        $('nav a:eq(' + index + ')').addClass('active').parent().siblings().find('a').removeClass('active');
    });
}

//nav 메뉴 고정
function navFixed() {
    var offset = $('nav').offset();
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        if (offset.top <= scrollTop) {
            if ($.browser.version == 6) {
                $('nav').css({
                    'position': 'absolute',
                    'left': '0',
                    'top': scrollTop
                });
                return false;
            }
            $('nav').css({
                'position': 'fixed',
                'top': '0'
            });
        } else {
            $('nav').css({
                'position': 'static',
                'top': 'auto'
            });
        }
    });
}

JavaScript

@font-face { font-family:'LexiSaebomRWeb'; font-style:normal; font-weight:400; src: url('http://api.mobilis.co.kr/webfonts/Lexi/LexiSaebomRCompact.woff') format('woff');}
@font-face { font-family:'LexiSaebomRWeb'; font-style:normal; font-weight:400; src: url('http://api.mobilis.co.kr/webfonts/Lexi/LexiSaebomRCompact.eot')}
header, nav, section, article, footer, div, h1{margin:0;padding:0;display:block;}
html{height:100%;overflow-x:hidden;}
body{margin:0;padding:0;font:normal 100% LexiSaebomRWeb;height:100%;background-color:black;}
section{position:relative;height:100%;}
header{height:100%;text-align:center;color:white;}
header h1{padding-top:200px;font-size:70px;}
header nav{padding:10px 0;width:100%;}
header nav ul{margin:0 auto;width:300px;overflow:hidden;}
header nav ul li{margin-right:5px;float:left;list-style:none;}
header nav ul li.menu01{background-color:black;}
header nav ul li.menu02{background-color:lightyellow;}
header nav ul li.menu03{background-color:red;}
header nav ul li.menu04{background-color:lightblue;}
header nav ul li.menu05{background-color:lightgreen;}
header nav ul li a{display:block;width:50px;height:50px;border:1px solid white;text-indent:-1000em;overflow:hidden;}
header nav ul li a.active{border:1px solid black;}
article{height:100%;background-color:white;overflow:hidden;}
article#c01{background-color:lightyellow;}
article#c02{background-color:red;}
article#c03{background-color:lightblue;}
article#c04{background-color:lightgreen;}
article div{margin:0 auto;padding:20% 0;width:900px;}
footer{text-align:center;}
footer address{display:block;padding:10px 0;color:white;}

CSS

Result

Choose Framework

Panels

Manage Resources (2)

Info

Testing Ajax requests

Examples

jQuery

Dojo

Mootools

YUI

Processing.js

ExtJS

Legal stuff and credits