HTML结构将由一个主容器和一些行,我们将使用左派和右派的元素。左边和右边元素要么包含一个h2标题,一个圆形与背景图片或描述的h3元素与一个链接和一个跨越:
圆圈里我们会有三个不同尺寸和我们会表明,但是给各自的行“ss-small”类,“ss-medium”或“ss-large”。让我们看一下样式。容器将占领所有的宽度,我们会设置溢出隐藏,因为我们不需要一个滚动条出现当我们移动的左和右的元素如果:.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)}创建一个圆,我们将锚的边界半径设置为50%,我们将添加一些整洁的阴影:.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%;}我们将使用伪元素:之前和之后为了创建的线和箭头指向中线。将被定义为一个百分比宽度,适应屏幕大小。我们还将中心通过顶部设置为50%,正确位置通过设置margin-top 3 px。根据(左或右)我们想要的位置不同:.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-small已经设置在圆本身):.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);}/* and so on... */这是所有的样式让我们看看JavaScript。最初想法是显示所有元素是可见的视窗上。所有其他元素将隐藏通过向左或向右值设置为-50%。如果角度选项设置为true,那么这些元素将翻译和y轴旋转,不透明度设置为0。在滚动,我们想通过滑动显示外侧元素位置0(分别向左或向右),或角度的情况下,相应的旋转。var $rows = $('#ss-container > div.ss-row'), // we will cache the inviewport // rows and the outside viewport rows $rowsViewport, $rowsOutViewport, // navigation menu links $links = $('#ss-links > a'), // the window element $win = $(window), // we will store the window sizes here winSize = {}, // used in the scroll setTimeout function anim = false, // page scroll speed scollPageSpeed = 2000 , // page scroll easing scollPageEasing = 'easeInOutExpo', // perspective? hasPerspective = true, perspective = hasPerspective && Modernizr.csstransforms3d,我们将有以下方法:// initialize functioninit = function() { // get window sizes getWinSize(); // initialize events initEvents(); // define the inviewport selector defineViewport(); // gets the elements that match the previous selector setViewportRows(); // if perspective add css if( perspective ) { $rows.css({ '-webkit-perspective' : 600, '-webkit-perspective-origin' : '50% 0%' }); } // show the pointers for the inviewport rows $rowsViewport.find('a.ss-circle').addClass('ss-circle-deco'); // set positions for each row placeRows(); },defineViewport定义了一个选择器,收集的行元素最初是可见的。一个元素是可见的,如果其最高不到窗口的高度。这些元素滚动页面时将不受影响:defineViewport = function() { $.extend( $.expr[':'], { inviewport : function ( el ) { if ( $(el).offset().top < winSize.height ) { return true; } return false; } }); },setViewportRows检查哪些行是最初可见:setViewportRows = function() { $rowsViewport = $rows.filter(':inviewport'); $rowsOutViewport = $rows.not( $rowsViewport ) },getWinSize获取窗口宽度和高度:getWinSize = function() { winSize.width = $win.width(); winSize.height = $win.height(); },现在让我们来初始化一些事件:initEvents = function() { // navigation menu links. // scroll to the respective section. $links.on( 'click.Scrolling', function( event ) { // scroll to the element that has id = menu's href $('html, body').stop().animate({ scrollTop: $( $(this).attr('href') ).offset().top }, scollPageSpeed, scollPageEasing ); return false; }); $(window).on({ // on window resize we need to redefine // which rows are initially visible // (this ones we will not animate). 'resize.Scrolling' : function( event ) { // get the window sizes again getWinSize(); // redefine which rows are initially // visible (:inviewport) setViewportRows(); // remove pointers for every row $rows.find('a.ss-circle').removeClass('ss-circle-deco'); // show inviewport rows and respective pointers $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'); }); }, // when scrolling the page change // the position of each row 'scroll.Scrolling' : function( event ) { // set a timeout to avoid that the // placeRows function gets called on // every scroll trigger if( anim ) return false; anim = true; setTimeout( function() { placeRows(); anim = false; }, 10 ); } }); },placeRows集的位置行(左和右行元素)。这两个元素将开始为-50%左/右(不可见)。这个值应该是0%(最终位置)时,在窗口的中心元素。placeRows = function() { // how much we scrolled so far var winscroll = $win.scrollTop(), // the y value for the center of the screen winCenter = winSize.height / 2 + winscroll; // for every row that is not inviewport $rowsOutViewport.each( function(i) { var $row = $(this), // the left side element $rowL = $row.find('div.ss-left'), // the right side element $rowR = $row.find('div.ss-right'), // top value rowT = $row.offset().top; // hide the row if it is under the viewport 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%' }); } } // if not, the row should become visible // (0% of left/right) as it gets closer to // the center of the screen. else { // row's height var rowH = $row.height(), // the value on each scrolling step // will be proporcional to the distance // from the center of the screen to its height factor = ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ), // value for the left / right of each side of the row. // 0% is the limit val = Math.max( factor * 50, 0 ); if( val <= 0 ) { // when 0% is reached show the pointer for that row if( !$row.data('pointer') ) { $row.data( 'pointer', true ); $row.find('.ss-circle').addClass('ss-circle-deco'); } } else { // the pointer should not be shown if( $row.data('pointer') ) { $row.data( 'pointer', false ); $row.find('.ss-circle').removeClass('ss-circle-deco'); } } // set calculated values 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 + '%' }); } } }); }; return { init : init }; ![jQuery横向On-Scroll滑动]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······
未经允许不得转载：
ICode联盟 »
插件特效 »
jQuery横向On-Scroll滑动