Поперечное проскальзывание материала при прокрутке страницы

<div id="ss-container" class="ss-container">
    <div class="ss-row">
        <div class="ss-left">
            <h2 id="november">November</h2>
        </div>
        <div class="ss-right">
            <h2>2011</h2>
        </div>
    </div>
    <div class="ss-row ss-medium">
        <div class="ss-left">
            <a href="#" class="ss-circle ss-circle-1">Some title</a>
        </div>
        <div class="ss-right">
            <h3>
                <span>November 28, 2011</span>
                <a href="#">Some Title</a>
            </h3>
        </div>
    </div>
    <!-- Другие строки... -->
</div>

.ss-container{
    width: 100%;
    position: relative;
    text-align: left;
    float: left;
	overflow: hidden;
	padding-bottom: 500px;
}

.ss-container:before{
    position: absolute;
    width: 4px;
    background: rgba(17,17,22,0.8);
    top: 0px;
    left: 50%;
    margin-left: -2px;
    content: '';
    height: 100%;
}

.ss-row{
   width: 100%;
   clear: both;
   float: left;
   position: relative;
   padding: 30px 0;
}

.ss-left, .ss-right{
    float: left;
    width: 48%;
    position: relative;
}
.ss-right{
    padding-left: 2%;
}
.ss-left{
    text-align: right;
    float: left;
    padding-right: 2%;
}

.ss-container h2{
    font-size: 40px;
    text-transform: uppercase;
    color: rgba(78,84,123,0.2);
    text-shadow: 0px 1px 1px #fff;
    padding: 20px 0px;
}
.ss-container h3{
    margin-top: 34px;
    padding: 10px 15px;
    background: rgba(26, 27, 33, 0.6);
    text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)
}

.ss-circle{
    border-radius: 50%;
    overflow: hidden;
    display: block;
    text-indent: -9000px;
    text-align: left;
    box-shadow:
        0px 2px 5px rgba(0,0,0,0.7) inset,
        0px 0px 0px 12px rgba(61,64,85,0.3);
    background-size: cover;
    background-color: #f0f0f0;
    background-repeat: no-repeat;
    background-position: center center;
}

.ss-small .ss-circle{
    width: 100px;
    height: 100px;
}
.ss-medium .ss-circle{
    width: 200px;
    height: 200px;
}
.ss-large .ss-circle{
    width: 300px;
    height: 300px;
}
.ss-left .ss-circle{
    float: right;
    margin-right: 30%;
}
.ss-right .ss-circle{
    float: left;
    margin-left: 30%;
}

.ss-circle-deco:before{
    width: 29%;
    height: 0px;
    border-bottom: 5px dotted #ddd;
    border-bottom: 5px dotted rgba(17, 17, 22, 0.3);
    box-shadow: 0px 1px 1px #fff;
    position: absolute;
    top: 50%;
    content: '';
    margin-top: -3px;
}
.ss-left .ss-circle-deco:before{
    right: 2%;
}
.ss-right .ss-circle-deco:before{
    left: 2%;
}

.ss-circle-deco:after{
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -10px;
}
.ss-left .ss-circle-deco:after{
    right: 0;
    border-right: 10px solid rgba(17,17,22,0.8);
}
.ss-right .ss-circle-deco:after{
    left: 0;
    border-left: 10px solid rgba(17,17,22,0.8);
}

.ss-container .ss-medium h3{
    margin-top: 82px;
}
.ss-container .ss-large h3{
    margin-top: 133px;
}
.ss-container .ss-left h3{
    border-right: 5px solid rgba(164,166,181,0.8);
}
.ss-container .ss-right h3{
    border-left: 5px solid rgba(164,166,181,0.8);
}

.ss-container h3 span{
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    display: block;
    padding-bottom: 5px;
}
.ss-container h3 a{
    font-size: 28px;
    color: rgba(255,255,255,0.9);
    display: block;
}
.ss-container h3 a:hover{
    color: rgba(255,255,255,1);
}

.ss-circle-1{
    background-image:url(../images/1.jpg);
}
.ss-circle-2{
    background-image: url(../images/2.jpg);
}
.ss-circle-3{
    background-image: url(../images/3.jpg);
}
/* и так далее... */

					// Элементы строк
				    	var $rows			= $('#ss-container > div.ss-row'),
					// Будем кешировать строки в окне просмотра и строки вне окна просмотра
					$rowsViewport, $rowsOutViewport,
					// Ссылки навигационного меню
					$links			= $('#ss-links > a'),
					// Элемент окна
					$win			= $(window),
					// Будем хранить размер окна здесь
					winSize			= {},
					// Используется в функции setTimeout прокуртки
					anim			= false,
					// Скорость прокрутки страницы
					scollPageSpeed	= 2000 ,
					// Переход прокрутки страницы
					scollPageEasing = 'easeInOutExpo',
					// Используется перспектива?
					hasPerspective	= false,
					perspective		= hasPerspective && Modernizr.csstransforms3d,

					// Функция инициализации
					init			= function() {
						
						// Получаем размер окна
						getWinSize();
						// Инициализуем события
						initEvents();
						// Определяем селектор окна просмотра
						defineViewport();
						// Получаем элементы, которые соответствуют предыдущему селектору
						setViewportRows();
						// Если используется перспектива, добавляем CSS 
						if( perspective ) {
							$rows.css({
								'-webkit-perspective'			: 600,
								'-webkit-perspective-origin'	: '50% 0%'
							});
						}
						// Показываем указатели на строки окна просмотра
						$rowsViewport.find('a.ss-circle').addClass('ss-circle-deco');
						// Устанавливаем указатели для каждой строки
						placeRows();
						
					},

					// Определяем селектор, который собирает элементы строки, выдимой изначально.
					// Элемент видимый, если его координата top меньше высоты окна.
					// Данные элементы не подвергаются воздействию при прокрутке страницы.
					defineViewport	= function() {
					
						$.extend( $.expr[':'], {
						
							inviewport	: function ( el ) {
								if ( $(el).offset().top < winSize.height ) {
									return true;
								}
								return false;
							}
						
						});
					
					},

					// Проверяем, какие строки изначально видимы
					setViewportRows	= function() {
						
						$rowsViewport 		= $rows.filter(':inviewport');
						$rowsOutViewport	= $rows.not( $rowsViewport )
						
					},

					// Получаем рзамер окна
					getWinSize		= function() {
					
						winSize.width	= $win.width();
						winSize.height	= $win.height();
					
					},

					// Инициализуем некоторые события
					initEvents		= function() {
						
						// Ссылки меню навигации.
						// Прокрутка до соответствующей секции.
						$links.on( 'click.Scrolling', function( event ) {
							
							// Прокрутка до элемента, который имеет идентификатор из меню
							$('html, body').stop().animate({
								scrollTop: $( $(this).attr('href') ).offset().top
							}, scollPageSpeed, scollPageEasing );
							
							return false;
						
						});
						
						$(window).on({
							// При изменение размеров окна нужно преопределить видимость строк (данное действие проходит без анимации/).
							'resize.Scrolling' : function( event ) {
								
								// Получаем размер окна снова
								getWinSize();
								// Переопределяем видимость строк
								setViewportRows();
								// Удаляем указатели для каждой строки
								$rows.find('a.ss-circle').removeClass('ss-circle-deco');
								// Выводим видимые строки и соответствующие указатели
								$rowsViewport.each( function() {
								
									$(this).find('div.ss-left')
										   .css({ left   : '0%' })
										   .end()
										   .find('div.ss-right')
										   .css({ right  : '0%' })
										   .end()
										   .find('a.ss-circle')
										   .addClass('ss-circle-deco');
								
								});
							
							},
							// При прокрутке страницы изменяем положение каждой строки
							'scroll.Scrolling' : function( event ) {
								
								// Устанавливаем таймаут для того, чтобы избежать
								// вызова функции placeRowsна каждой прокрутке
								if( anim ) return false;
								anim = true;
								setTimeout( function() {
									
									placeRows();
									anim = false;
									
								}, 10 );
							
							}
						});
					
					},

					// Устанавливаем положение строк (левые и правые элементы строк).
					// Оба данных элемента будут начинать движение с -50% слева/справа (не видимые),
					// а значение должно быть 0% (окончательное положение), когда элемент 
					// приходит к центру окна.
					placeRows		= function() {
						
							// Как далеко мы прокурутили страницу
						var winscroll	= $win.scrollTop(),
							// Значение y для центра экрана
							winCenter	= winSize.height / 2 + winscroll;
						
						// Для каждой строки, которая не входит в окно просмотра
						$rowsOutViewport.each( function(i) {
							
							var $row	= $(this),
								// Элемент левой стороны
								$rowL	= $row.find('div.ss-left'),
								// Элемент правой стороны
								$rowR	= $row.find('div.ss-right'),
								// Значение top
								rowT	= $row.offset().top;
							
							// Скрываем строку, если она под окном просмотра
							if( rowT > winSize.height + winscroll ) {
								
								if( perspective ) {
								
									$rowL.css({
										'-webkit-transform'	: 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)',
										'opacity'			: 0
									});
									$rowR.css({
										'-webkit-transform'	: 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)',
										'opacity'			: 0
									});
								
								}
								else {
								
									$rowL.css({ left 		: '-50%' });
									$rowR.css({ right 		: '-50%' });
								
								}
								
							}
							// Если строка должна быть показана (0% слева/справа), она придвигается ближе к центру экрана.
							else {
									
									// Высота строки
								var rowH	= $row.height(),
									// Значение на каждом этапе прокрутки пропорционально от центра экрана
									factor 	= ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ),
									// Значение left / right для каждой стоороны строки.
									// 0% - предел.
									val		= Math.max( factor * 50, 0 );
									
								if( val <= 0 ) {
								
									// Когда достигается 0%, надо вывести указатель для строки
									if( !$row.data('pointer') ) {
									
										$row.data( 'pointer', true );
										$row.find('.ss-circle').addClass('ss-circle-deco');
									
									}
								
								}
								else {
									
									// Указатель для строки должен быть виден
									if( $row.data('pointer') ) {
										
										$row.data( 'pointer', false );
										$row.find('.ss-circle').removeClass('ss-circle-deco');
									
									}
									
								}
								
								// Устанавливаем вычисленные значения
								if( perspective ) {
									
									var	t		= Math.max( factor * 75, 0 ),
										r		= Math.max( factor * 90, 0 ),
										o		= Math.min( Math.abs( factor - 1 ), 1 );
									
									$rowL.css({
										'-webkit-transform'	: 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)',
										'opacity'			: o
									});
									$rowR.css({
										'-webkit-transform'	: 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)',
										'opacity'			: o
									});
								
								}
								else {
									
									$rowL.css({ left 	: - val + '%' });
									$rowR.css({ right 	: - val + '%' });
									
								}
								
							}	
						
						});
					
					};