利用jQ HTML5实现视差滑动幻灯片



60 237 80



特效描述:利用jQ HTML5实现 视差滑动 幻灯片,利用jQ HTML5实现视差滑动幻灯片

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/screen.css?v=1.3" media="screen" />
<link href="css/zzsc.css" type="text/css" rel="stylesheet">

2. 引入JS

<script src="js/html5.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/zzsc.js?v=1.4"></script>

3. HTML代码

	<section id="content" role="main">	
		<nav class="cycle-nav-container" role="navigation">			
			<h2 class="offset">Nawigacja między projektami</h2>
			<ul class="list-b" id="cycle-1-nav">
				<li class="hitmo"><a href="#hitmo">Hitmo</a></li>
				<li class="fastpr"><a href="#fastpr">FastPr</a></li>
				<li class="thinkmedia"><a href="#thinkmedia">Thinkmedia</a></li>
				<li class="arkana"><a href="#arkana">Arkana</a></li>
				<li class="bioway"><a href="#bioway">Bioway</a></li>
				<li class="nana"><a href="#nana">Nanaform</a></li>
				<li class="akademia"><a href="#akademia">Akademia Social Media</a></li>
			</ul>
		</nav><!-- .cycle-nav-container -->
		<section class="box-c cycle-a">
			<article class="cycle-item hitmo" id="hitmo" data-thumbnail="hitmo_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Hittin’<br/> the web</h1>
							<p>Powstaliśmy aby uderzać mocno i celnie.<br/> Wiele lat pracy z czołowymi agencjami interaktywnymi nauczyło nas jak<br/> działać skutecznie.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Zobacz co możemy dla Ciebie zrobić</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a"><img src="images/vis-hitmo.png" width="599" height="487" alt=""/></p>							
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item fastpr" id="fastpr" data-thumbnail="fastpr_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Najszybszy<br/> PR w sieci.</h1>
							<p>Stworzyliśmy identyfikację wizualną i serwis www dla agencji PR, która oferuje ciekawy sposób na szybkie i skuteczne usługi online.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Dowiedz się więcej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<div class="special-box">									
								<h2 class="header-fastpr">FastPR</h2>
								<p class="text-a">Finalista Democamp startups 2010</p>
								<p class="democamp"><img src="images/democamp-logo.png" width="133" height="25" alt="Democamp Logo"/></p>
							</div><!-- .special-box -->
							<p class="image-a"><img src="images/vis-fastpr.png" width="458" height="325" alt=""/></p>
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item thinkmedia" id="thinkmedia" data-thumbnail="thinkmedia_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Nie tylko<br/> dla geeków.</h1>
							<p><q>“Najlepsze książki to te, o których każdy czytelnik sądzi, że takie by też napisał.”</q> To zdanie <cite>Blaise Pascala</cite> jest mottem wydawnictwa Thinkmedia, dla którego stworzyliśmy nowy serwis www.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Dowiedz się więcej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a"><img src="images/vis-thinkmedia.png" width="471" height="488" alt=""/></p>							
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item arkana" id="arkana" data-thumbnail="arkana_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Prawo dla<br/> biznesu.</h1>
							<p>Kancelaria Prawna Arkana na co dzień <br/> pomaga przedsiębiorcom wybrać<br/> korzystne rozwiązania dla ich biznesu. <br/>My pomogliśmy jej w wyborze <br/> odpowiednich rozwiązań internetowych.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Dowiedz się więcej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a"><img src="images/vis-arkana.png" width="685" height="420" alt="Vis Arkana"/> <!--<img src="images/project-visuals/vis-arkana.png" width="685" height="420" alt="Vis Arkana"/>--></p>							
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item bioway" id="bioway" data-thumbnail="bioway_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Smacznie<br/> i zdrowo</h1>
							<p>Filozofia BIOWAY to sprostanie<br/> oczekiwaniom klientów, którzy dbają<br/> o to, co i w jaki sposób jedzą.<br/> My zadbaliśmy o zdrową obecność<br/> BIOWAY w internecie.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Dowiedz się więcej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a">								
								<img src="images/vis-bioway_2.png" width="589" height="461" alt=""/>
							</p>							
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item nana" id="nana" data-thumbnail="nana_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Wnętrze<br/> i forma</h1>
							<p>Młode studio projektowe, dla którego<br/> tworzenie wnętrz to przyjemność <br/>i pasja. My z pasją podeszliśmy do<br/> stworzenia ich wizerunku.</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a">Dowiedz się więcej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a"><img src="images/vis-nana.png" width="531" height="256" alt=""/></p>							
						</div>
					</div><!-- .wrapper-a -->
				</div><!-- .noizzz -->
			</article>
			<article class="cycle-item akademia" id="akademia" data-thumbnail="akademia_thumb.png">
				<div class="noizzz">
					<div class="wrapper-a">	
						<div class="content">														
							<h1 class="header-a">Akademia<br/> social<br/> media</h1>
							<p>Myślisz że znasz media społecznościowe?<br/> W Akademii Social Media pokażą<br/> Ci takie rzeczy, że ho ho...</p>
							<p class="more-a"><a href="http://51qianduan.com/" class="link-a lnka-a">Dowiedz się więcej</a></p>
						</div><!-- .content -->
						<div class="vis-box">
							<p class="image-a"><img src="images/vis-akademia.png" width="577" height="427" alt=""/></p>							
						</div>
					</div><!-- .wrapper-a -->
				</div>
			</article>
		</section>
		<section class="box-a" role="complementary">
			<div class="wrapper-b">
				<ul class="list-c" id="navBoxes" role="navigation">
					<li class="what-we-do">
						<a href="#">
							<h2>Usługi</h2>
							<p>Zobacz w czym<br/> możemy Ci pomóc. W tym jesteśmy najlepsi.</p>
							<p class="more-b">Więcej</p>
						</a>
					</li>
					<li class="team">
						<a href="#">
							<h2>Zespół</h2>
							<p>Nie trzeba być<br/> “fabryką” by<br/> tworzyć skuteczne<br/> rozwiązania.</p>
							<p class="more-b">Więcej</p>
						</a>						
					</li>
					<li class="faq">
						<a href="#">
							<h2>Współpraca</h2>
							<p>Etapy współpracy<br/> i wartości jakimi<br/> się kierujemy.</p>
							<p class="more-b">Więcej</p>
						</a>
					</li>
					<li class="contact">
						<a href="#">
							<h2>Kontakt</h2>
							<p>Zadaj pytanie,<br/> zapytaj o wycenę,<br/> powiedz cześć.</p>
							<p class="more-b">Więcej</p>
						</a>						
					</li>
				</ul>
			</div>
			<div style="width:100%; height:50px;"></div>		
		</section>
	</section>
	<script src="js/zzsc.js?v=1.4"></script>	
<div style="text-align:center;clear:both">
</div>



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


热门标签: 滑动导航菜单 导航切换 带标题的焦点图 滑动选项卡切换 带缩略图的幻灯片 带简介的焦点图 图片滑动 图片切换 图片轮播 文字滑动 文字切换 自动滚动图片轮播 滑动手风琴 背景切换 马赛克幻灯片 滑动星星打分 手风琴 全屏焦点图 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滑动滑过 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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