jquery html5 css3网站内容更新时间轴进度条效果



126 502 168



特效描述:jquery html5css3 网站内容更新 时间轴进度条效果,时间轴两侧的内容随着滚动条滚动,动画形式从右侧加载到中间,也有时间轴快速跳到想要的月份内容

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Kelly+Slab' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/styleIE.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.11333.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

3. HTML代码

<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>2011</h2>
		</div>
	</div>
	<div class="ss-row ss-medium">
		<div class="ss-left">
			<a href="http://www.51qianduan.com/" class="ss-circle ss-circle-1">Typography Effects with CSS3 and jQuery</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>November 28, 2011</span>
				<a href="http://www.51qianduan.com/">Typography Effects with CSS3 and jQuery</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-large">
		<div class="ss-left">
			<h3>
				<span>November 22, 2011</span>
				<a href="http://www.51qianduan.com/">Hover and Click Trigger for Circular Elements with jQuery</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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="http://www.51qianduan.com/" class="ss-circle ss-circle-3">Elastic Image Slideshow with Thumbnail Preview</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>November 21, 2011</span>
				<a href="http://www.51qianduan.com/">Elastic Image Slideshow with Thumbnail Preview</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-medium">
		<div class="ss-left">
			<h3>
				<span>November 18, 2011</span>
				<a href="http://www.51qianduan.com/">Fullscreen Image Blur Effect with HTML5</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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="http://www.51qianduan.com/" class="ss-circle ss-circle-5">Interactive Typography Effects with HTML5</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>November 9, 2011</span>
				<a href="http://www.51qianduan.com/">Interactive Typography Effects with HTML5</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-small">
		<div class="ss-left">
			<a href="http://www.51qianduan.com/" class="ss-circle ss-circle-6">Animated Buttons with CSS3</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>November 7, 2011</span>
				<a href="http://www.51qianduan.com/">Animated Buttons with CSS3</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-medium">
		<div class="ss-left">
			<h3>
				<span>November 2, 2011</span>
				<a href="http://www.51qianduan.com/">Original Hover Effects with CSS3</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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>2011</h2>
		</div>
	</div>
	<div class="ss-row ss-small">
		<div class="ss-left">
			<h3>
				<span>October 31, 2011</span>
				<a href="http://www.51qianduan.com/">Fullscreen Image 3D Effect with CSS3 and jQuery</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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="http://www.51qianduan.com/" class="ss-circle ss-circle-9">Creative CSS3 Animation Menus</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>October 24, 2011</span>
				<a href="http://www.51qianduan.com/">Creative CSS3 Animation Menus</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-medium">
		<div class="ss-left">
			<a href="http://www.51qianduan.com/" class="ss-circle ss-circle-10">Blur Menu with CSS3 Transitions</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>October 19, 2011</span>
				<a href="http://www.51qianduan.com/">Blur Menu with CSS3 Transitions</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-large">
		<div class="ss-left">
			<h3>
				<span>October 17, 2011</span>
				<a href="http://www.51qianduan.com/">Wave Display Effect with jQuery</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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="http://www.51qianduan.com/" class="ss-circle ss-circle-12">Flexible Slide-to-top Accordion</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>October 12, 2011</span>
				<a href="http://www.51qianduan.com/">Flexible Slide-to-top Accordion</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-medium">
		<div class="ss-left">
			<h3>
				<span>October 10, 2011</span>
				<a href="http://www.51qianduan.com/">Circle Navigation Effect with CSS3</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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="http://www.51qianduan.com/" class="ss-circle ss-circle-14">Draggable Image Boxes Grid</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>October 7, 2011</span>
				<a href="http://www.51qianduan.com/">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>2011</h2>
		</div>
	</div>
	<div class="ss-row ss-small">
		<div class="ss-left">
			<h3>
				<span>September 30, 2011</span>
				<a href="http://www.51qianduan.com/">Scrollbar Visibility with jScrollPane</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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="http://www.51qianduan.com/" class="ss-circle ss-circle-16">Multi-level Photo Map</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>September 27, 2011</span>
				<a href="http://www.51qianduan.com/">Multi-level Photo Map</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-large">
		<div class="ss-left">
			<a href="http://www.51qianduan.com/" class="ss-circle ss-circle-17">Responsive Image Gallery with Thumbnail Carousel</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>September 20, 2011</span>
				<a href="http://www.51qianduan.com/">Responsive Image Gallery with Thumbnail Carousel</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-small">
		<div class="ss-left">
			<h3>
				<span>September 12, 2011</span>
				<a href="http://www.51qianduan.com/">Elastislide - A Responsive jQuery Carousel Plugin</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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="http://www.51qianduan.com/" 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, 2011</span>
				<a href="http://www.51qianduan.com/">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>2011</h2>
		</div>
	</div>
	<div class="ss-row ss-large">
		<div class="ss-left">
			<h3>
				<span>August 30, 2011</span>
				<a href="http://www.51qianduan.com/">Automatic Image Montage with jQuery</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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="http://www.51qianduan.com/" class="ss-circle ss-circle-21">Image Zoom Tour with jQuery</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>August 23, 2011</span>
				<a href="http://www.51qianduan.com/">Image Zoom Tour with jQuery</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-small">
		<div class="ss-left">
			<h3>
				<span>August 16, 2011</span>
				<a href="http://www.51qianduan.com/">Circular Content Carousel with jQuery</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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="http://www.51qianduan.com/" class="ss-circle ss-circle-23">Portfolio Image Navigation with jQuery</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>August 9, 2011</span>
				<a href="http://www.51qianduan.com/">Portfolio Image Navigation with jQuery</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-medium">
		<div class="ss-left">
			<h3>
				<span>August 4, 2011</span>
				<a href="http://www.51qianduan.com/">Expanding Fullscreen Grid Portfolio</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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>2011</h2>
		</div>
	</div>
	<div class="ss-row ss-small">
		<div class="ss-left">
			<a href="http://www.51qianduan.com/" class="ss-circle ss-circle-25">Content Rotator with jQuery</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>July 29, 2011</span>
				<a href="http://www.51qianduan.com/">Content Rotator with jQuery</a>
			</h3>
		</div>
	</div>
	<div class="ss-row ss-large">
		<div class="ss-left">
			<h3>
				<span>July 22, 2011</span>
				<a href="http://www.51qianduan.com/">Vertical Sliding Accordion with jQuery</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.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://www.51qianduan.com/" class="ss-circle ss-circle-27">Animated Text and Icon Menu with jQuery</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>July 12, 2011</span>
				<a href="http://www.51qianduan.com/">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, 2011</span>
				<a href="http://www.51qianduan.com/">Fullscreen Slideshow with HTML5 Audio and jQuery</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" 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="http://www.51qianduan.com/" class="ss-circle ss-circle-28">Sliding Background Image Menu with jQuery</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>July 3, 2011</span>
				<a href="http://www.51qianduan.com/">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>2011</h2>
		</div>
	</div>
	<div class="ss-row ss-small">
		<div class="ss-left">
		   <h3>
				<span>June 9, 2011</span>
				<a href="http://www.51qianduan.com/">Grid Navigation Effects with jQuery</a>
			</h3>
		</div>
		<div class="ss-right">
			<a href="http://www.51qianduan.com/" class="ss-circle ss-circle-29">Grid Navigation Effects with jQuery</a>
		</div>
	</div>
</div>
<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动滑过 加载动画 html5弹窗动画 切换按钮 日历日期时间 html5动画h5动画 form表单 html5按钮动画 时间轴 html5动画导航菜单 滑动选项卡切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到