Горизонтальная постраничная анимация

Погружаем с Гугла jQuery библиотеку

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

и плагин jQuery Easing v1.3

<script src="jquery.easing.1.3.js" type="text/jаvascript"></script>

И далее нам нужно оживить нашу страницу, то есть вызвать соответствующие функции, для этого вставим в самом конце, перед закрытием тега BODY следующий код:

<script>
function Animate2id(id,ease){ //анимация по id, тип - easing
    var animSpeed=2000; //скорость анимации
    var $container=$("#container"); //определяем контейнер для движения
    if(ease){ //check if ease variable is set
        var easeType=ease;
    } else {
        var easeType="easeOutQuart"; //установка по умолчанию для типа easing
    }
 //выполнять анимацию
    $container.stop().animate({"left": -($(id).position().left)}, animSpeed, easeType);
}
</script>

Эта функция обрабатывает ID, тип easing, выполняет проверку на поддержку браузера и оживляет контейнер применяя эффект easing. Внутри функции мы можем установить скорость анимации, используемый easing тип по умолчанию и контейнер для анимации.
Для того, чтобы использовать функцию, мы можем её вызвать таким образом:

<a href="#" onclick="Animate2id('#c1','easeInOutExpo'); return false">Content 1</a>

Внутри функции мы устанавливаем ID для анимации (#c1) и тип easing (easeInOutExpo). Если мы не указали конкретный тип easing эффекта, то будет использоваться, тот который мы указали в функции по умолчанию.

CSS

Данный CSS код помещаем в теге head:

html,body{margin:0px; padding:0px; height:100%;}
body{overflow:hidden; position:relative;}
#menu{position:fixed; z-index: 2; top:10px; left:10px; clear:both; border:1px solid #666; padding:5px; background:#fff;}
#menu a{margin-left:5px; margin-right:5px;}
#container{position:relative; left:0; width:10000px; top:0; height:100%;}
#c1,#c2,#c3,#c4,#c5,#c6 {width:1500px; height:100%; float:left; margin-right:100px;}
#c1,#c3,#c5 {background:#eee;}
#c2,#c4,#c6 {background:#fff;}
.content{padding:60px 20px;}

HTML

<div id="menu">
    <a href="#" onclick="Animate2id('#c1'); return false" title="Перейти к содержанию 1-ого элемента. Тип easing: default">Контент 1</a>
    <a href="#" onclick="Animate2id('#c2','easeInOutExpo'); return false" title="Перейти к содержанию 2-ого элемента.Тип easing: easeInOutExpo">Контент 2</a>
    <a href="#" onclick="Animate2id('#c3','easeOutQuint'); return false" title="Перейти к содержанию 3-ого элемента. Тип easing: easeOutQuint">Контент 3</a>
    <a href="#" onclick="Animate2id('#c4','easeOutElastic'); return false" title="Перейти к содержанию 4-ого элемента. Тип easing type: easeOutElastic">Контент 4</a>
    <a href="#" onclick="Animate2id('#c5','easeOutBack'); return false" title="Перейти к содержанию 5-ого элемента. Тип easing type: easeOutBack">Контент 5</a>
    <a href="#" onclick="Animate2id('#c6','easeOutBounce'); return false" title="Перейти к содержанию 6-ого элемента. Тип easing type: easeOutBounce">Контент 6</a>
</div>
<div id="container">
    <div id="c1">
        <div class="content">Контент 1</div>
    </div>    
    <div id="c2">
        <div class="content">Контент 2</div>
    </div>
    <div id="c3">
        <div class="content">Контент 3</div>
    </div>
    <div id="c4">
        <div class="content">Контент 4</div>
    </div>
    <div id="c5">
        <div class="content">Контент 5</div>
    </div>
    <div id="c6">
        <div class="content">Контент 6</div>
    </div>
</div>