jq横向滑动排版效果
时间：2021-07-01 10:21:17 帮助过：0人阅读
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>
人气教程排行
- 0次 1 基于jquery宽屏菜单导航
- 0次 2 国外jQuery动态瀑布流布局
- 0次 3 定时收缩的jquery指示器特效
- 0次 4 jQuery横向动态滑动特效
- 0次 5 3D餐厅菜单折叠jQuery特效
- 0次 6 3D幻灯片jquery特效
- 0次 7 jQuery的精美相册效果
- 0次 8 jQuery全屏幻灯片特效
- 0次 9 jquery+css3超酷焦点图切换
- 0次 10 基于jQuery&CSS3开关按钮特效
- 0次 11 基于jquery实现杂志翻页效果
- 0次 12 jquery+css3图片拖拽特效
- 0次 13 jQuery创意字体特效
- 0次 14 windows8风格jquery菜单特效
- 0次 15 jQuery幻灯形式的Tab切换效果
- 0次 16 jQuery三重面板图像滑块
- 0次 17 基于jQuery可爱T恤展开特效
- 0次 18 jQuery图片放大显示效果
- 0次 19 基于jQuery照相亭特效
- 0次 20 jQuery+CSS3网页底部炫酷工具条