mgtv - 素材

当前位置:Gxlcms > jQuery脚本 > jq横向滑动排版效果

jq横向滑动排版效果

时间:2021-07-01 10:21:17 帮助过:0人阅读

jq横向滑动排版效果 jq横向滑动排版效果是一款基于jquery+css3实现的横向滚动滑动排版特效。本作品由【站长素材】收集整理,转载请注明出处!
    <head>
        <title>jq横向滑动排版效果 - mgtv素材</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Kelly+Slab' rel='stylesheet' type='text/css' />
		<!--[if lt IE 9]>
				<link rel="stylesheet" type="text/css" href="css/styleIE.css" />
		<![endif]-->
		<script type="text/javascript" src="js/modernizr.custom.11333.js"></script>
    </head>
    <body>
        <div class="container">

            <h1></h1>
            <h2 class="ss-subtitle">jq横向滑动排版效果</h2>
			<div id="ss-links" class="ss-links">
				<a href="#november">Nov</a>
				<a href="#october">Oct</a>
				<a href="#september">Sep</a>
				<a href="#august">Aug</a>
				<a href="#july">Jul</a>
				<a href="#june">Jun</a>
			</div>
            <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>2013</h2>
                    </div>
                </div>
                <div class="ss-row ss-medium">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-1">Typography Effects with CSS3 and jQuery</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>November 28, 2013</span>
                            <a href="https://www.mgtv.xyz">Typography Effects with CSS3 and jQuery</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-large">
                    <div class="ss-left">
                        <h3>
                            <span>November 22, 2013</span>
                            <a href="https://www.mgtv.xyz">Hover and Click Trigger for Circular Elements with jQuery</a>
                        </h3>
                    </div>
					<div class="ss-right">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-2">Hover and Click Trigger for Circular Elements with jQuery</a>
                    </div>
                </div>
                <div class="ss-row ss-small">
                    <div class="ss-left">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-3">Elastic Image Slideshow with Thumbnail Preview</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>November 21, 2013</span>
                            <a href="https://www.mgtv.xyz">Elastic Image Slideshow with Thumbnail Preview</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-medium">
                    <div class="ss-left">
                        <h3>
                            <span>November 18, 2013</span>
                            <a href="https://www.mgtv.xyz">Fullscreen Image Blur Effect with HTML5</a>
                        </h3>
                    </div>
					<div class="ss-right">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-4">Fullscreen Image Blur Effect with HTML5</a>
                    </div>
                </div>
				<div class="ss-row ss-large">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-5">Interactive Typography Effects with HTML5</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>November 9, 2013</span>
                            <a href="https://www.mgtv.xyz">Interactive Typography Effects with HTML5</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-small">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-6">Animated Buttons with CSS3</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>November 7, 2013</span>
                            <a href="https://www.mgtv.xyz">Animated Buttons with CSS3</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-medium">
                    <div class="ss-left">
                        <h3>
                            <span>November 2, 2013</span>
                            <a href="https://www.mgtv.xyz">Original Hover Effects with CSS3</a>
                        </h3>
                    </div>
					<div class="ss-right">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-7">Original Hover Effects with CSS3</a>
                    </div>
                </div>
				<div class="ss-row">
                    <div class="ss-left">
                        <h2 id="october">October</h2>
                    </div>
                    <div class="ss-right">
                        <h2>2013</h2>
                    </div>
                </div>
				<div class="ss-row ss-small">
                    <div class="ss-left">
                        <h3>
                            <span>October 31, 2013</span>
                            <a href="https://www.mgtv.xyz">Fullscreen Image 3D Effect with CSS3 and jQuery</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-8">Fullscreen Image 3D Effect with CSS3 and jQuery</a>
                    </div>
                </div>
				<div class="ss-row ss-large">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-9">Creative CSS3 Animation Menus</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>October 24, 2013</span>
                            <a href="https://www.mgtv.xyz">Creative CSS3 Animation Menus</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-medium">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-10">Blur Menu with CSS3 Transitions</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>October 19, 2013</span>
                            <a href="https://www.mgtv.xyz">Blur Menu with CSS3 Transitions</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-large">
                    <div class="ss-left">
                        <h3>
                            <span>October 17, 2013</span>
                            <a href="https://www.mgtv.xyz">Wave Display Effect with jQuery</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-11">Wave Display Effect with jQuery</a>
                    </div>
                </div>
				<div class="ss-row ss-small">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-12">Flexible Slide-to-top Accordion</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>October 12, 2013</span>
                            <a href="https://www.mgtv.xyz">Flexible Slide-to-top Accordion</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-medium">
                    <div class="ss-left">
                        <h3>
                            <span>October 10, 2013</span>
                            <a href="https://www.mgtv.xyz">Circle Navigation Effect with CSS3</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-13">Circle Navigation Effect with CSS3</a>
                    </div>
                </div>
				<div class="ss-row ss-large">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-14">Draggable Image Boxes Grid</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>October 7, 2013</span>
                            <a href="https://www.mgtv.xyz">Draggable Image Boxes Grid</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row">
                    <div class="ss-left">
                        <h2 id="september">September</h2>
                    </div>
                    <div class="ss-right">
                        <h2>2013</h2>
                    </div>
                </div>
				<div class="ss-row ss-small">
                    <div class="ss-left">
                        <h3>
                            <span>September 30, 2013</span>
                            <a href="https://www.mgtv.xyz">Scrollbar Visibility with jScrollPane</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-15">Scrollbar Visibility with jScrollPane</a>
                    </div>
                </div>
				<div class="ss-row ss-medium">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-16">Multi-level Photo Map</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>September 27, 2013</span>
                            <a href="https://www.mgtv.xyz">Multi-level Photo Map</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-large">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-17">Responsive Image Gallery with Thumbnail Carousel</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>September 20, 2013</span>
                            <a href="https://www.mgtv.xyz">Responsive Image Gallery with Thumbnail Carousel</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-small">
                    <div class="ss-left">
						<h3>
                            <span>September 12, 2013</span>
                            <a href="https://www.mgtv.xyz">Elastislide - A Responsive jQuery Carousel Plugin</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-18">Elastislide - A Responsive jQuery Carousel Plugin</a>
                    </div>
                </div>
				<div class="ss-row ss-medium">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-19">Slicebox - A fresh 3D image slider with graceful fallback </a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>September 5, 2013</span>
                            <a href="https://www.mgtv.xyz">Slicebox - A fresh 3D image slider with graceful fallback </a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row">
                    <div class="ss-left">
                        <h2 id="august">August</h2>
                    </div>
                    <div class="ss-right">
                        <h2>2013</h2>
                    </div>
                </div>
				<div class="ss-row ss-large">
                    <div class="ss-left">
						<h3>
                            <span>August 30, 2013</span>
                            <a href="https://www.mgtv.xyz">Automatic Image Montage with jQuery</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-20">Automatic Image Montage with jQuery</a>
                    </div>
                </div>
				<div class="ss-row ss-medium">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-21">Image Zoom Tour with jQuery</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>August 23, 2013</span>
                            <a href="https://www.mgtv.xyz">Image Zoom Tour with jQuery</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-small">
                    <div class="ss-left">
						<h3>
                            <span>August 16, 2013</span>
                            <a href="https://www.mgtv.xyz">Circular Content Carousel with jQuery</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-22">Circular Content Carousel with jQuery</a>
                    </div>
                </div>
				<div class="ss-row ss-large">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-23">Portfolio Image Navigation with jQuery</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>August 9, 2013</span>
                            <a href="https://www.mgtv.xyz">Portfolio Image Navigation with jQuery</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-medium">
                    <div class="ss-left">
						<h3>
                            <span>August 4, 2013</span>
                            <a href="https://www.mgtv.xyz">Expanding Fullscreen Grid Portfolio</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-24">Expanding Fullscreen Grid Portfolio</a>
                    </div>
                </div>
				<div class="ss-row">
                    <div class="ss-left">
                        <h2 id="july">July</h2>
                    </div>
                    <div class="ss-right">
                        <h2>2013</h2>
                    </div>
                </div>
				<div class="ss-row ss-small">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-25">Content Rotator with jQuery</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>July 29, 2013</span>
                            <a href="https://www.mgtv.xyz">Content Rotator with jQuery</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-large">
                    <div class="ss-left">
						<h3>
                            <span>July 22, 2013</span>
                            <a href="https://www.mgtv.xyz">Vertical Sliding Accordion with jQuery</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="http://sc.chinaz.com" class="ss-circle ss-circle-26">Vertical Sliding Accordion with jQuery</a>
                    </div>
                </div>
				<div class="ss-row ss-medium">
                    <div class="ss-left">
                        <a href="http://sc.chinaz.com" class="ss-circle ss-circle-27">Animated Text and Icon Menu with jQuery</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>July 12, 2013</span>
                            <a href="https://www.mgtv.xyz">Animated Text and Icon Menu with jQuery</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row ss-small">
                    <div class="ss-left">
						<h3>
                            <span>July 5, 2013</span>
                            <a href="https://www.mgtv.xyz">Fullscreen Slideshow with HTML5 Audio and jQuery</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-30">Fullscreen Slideshow with HTML5 Audio and jQuery</a>
                    </div>
                </div>
				<div class="ss-row ss-large">
                    <div class="ss-left">
                        <a href="https://www.mgtv.xyz" class="ss-circle ss-circle-28">Sliding Background Image Menu with jQuery</a>
                    </div>
                    <div class="ss-right">
                        <h3>
                            <span>July 3, 2013</span>
                            <a href="https://www.mgtv.xyz">Sliding Background Image Menu with jQuery</a>
                        </h3>
                    </div>
                </div>
				<div class="ss-row">
                    <div class="ss-left">
                        <h2 id="june">June</h2>
                    </div>
                    <div class="ss-right">
                        <h2>2013</h2>
                    </div>
                </div>
				<div class="ss-row ss-small">
                    <div class="ss-left">
                       <h3>
                            <span>June 9, 2013</span>
                            <a href="https://www.mgtv.xyz">Grid Navigation Effects with jQuery</a>
                        </h3>
                    </div>
                    <div class="ss-right">
						<a href="https://www.mgtv.xyz" class="ss-circle ss-circle-29">Grid Navigation Effects with jQuery</a>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript">
		$(function() {

			var $sidescroll	= (function() {
					
					// the row elements
				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	= false,
					
					perspective		= hasPerspective && Modernizr.csstransforms3d,
					// initialize function
					init			= 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();
						
					},
					// defines a selector that gathers the row elems that are initially visible.
					// the element is visible if its top is less than the window's height.
					// these elements will not be affected when scrolling the page.
					defineViewport	= function() {
					
						$.extend( $.expr[':'], {
						
							inviewport	: function ( el ) {
								if ( $(el).offset().top < winSize.height ) {
									return true;
								}
								return false;
							}
						
						});
					
					},
					// checks which rows are initially visible 
					setViewportRows	= function() {
						
						$rowsViewport 		= $rows.filter(':inviewport');
						$rowsOutViewport	= $rows.not( $rowsViewport )
						
					},
					// get window sizes
					getWinSize		= function() {
					
						winSize.width	= $win.width();
						winSize.height	= $win.height();
					
					},
					// initialize some events
					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 );
							
							}
						});
					
					},
					// sets the position of the rows (left and right row elements).
					// Both of these elements will start with -50% for the left/right (not visible)
					// and this value should be 0% (final position) when the element is on the
					// center of the window.
					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 };
			
			})();
			
			$sidescroll.init();
			
		});
		</script>
<div style="text-align:center;clear:both">
<p>适用浏览器:FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。</p>
<p>来源:<a href="https://www.mgtv.xyz" target="_blank">mgtv素材</a></p>
</div>
    </body>