jQuery横向On-Scroll滑动

下载地址

HTML结构将由一个主容器和一些行,我们将使用左派和右派的元素。左边和右边元素要么包含一个h2标题,一个圆形与背景图片或描述的h3元素与一个链接和一个跨越:

November

2011

Some title

November 28, 2011 Some Title

圆圈里我们会有三个不同尺寸和我们会表明,但是给各自的行“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 };

dd: