jQuery個人簡介頁面滾動效果



84 334 112



特效描述:jQuery 個人簡介 頁面滾動效果,jQuery個人簡介頁面滾動效果

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/global.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/js.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/global.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/js.js"></script>
<script src="js/jquery.stellar.min.js"></script>

3. HTML代碼

?<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />	
	<title>jQuery個人簡介頁面滾動效果</title>
</head>
<body class="loading-process">
<div class="loading">
	<div class="loading-circle"></div>
	<div class="loading-avatar"><img src="images/[email protected]" alt="" width="100" height="100"></div>
	<div class="loading-info">正在努力加載中...</div>
</div>
<div class="section-header">
	<div class="section">
		<nav class="nav" role="navigation">
			<ul>
				<li class="nav-about fade fade1"><a href="#about">關于</a></li>
				<li class="nav-works fade fade4"><a href="#works">作品</a></li>
				<li class="fade back-home"><a href="#top">首頁</a></li>
				<li class="nav-skill fade fade2"><a href="#skill">能力</a></li>
				<li class="nav-contact fade fade3"><a href="#contact">聯系</a></li>
			</ul>
		</nav>
	</div>
	<div class="nav-bg"></div>
</div>
<div class="home-bg">
	<img src="images/home-bg.jpg" alt="" width="1000" height="667">
</div>
<div class="section-wrap section-fristpage" data-slide="1"  >
	<div class="section">
		<div class="section-content">
			<p class="fade fade1">Hi,我是 Aaron</p>
			<p class="fade fade2">歡迎我的個人主頁!</p>
			<p class="fade fade3">想了解更多,往下滾動哦 ^_^</p>
		</div>
		<a class="button2 scroll-tip fade fade4" data-slide="3" title="">向下滾動</a>
	</div>
</div>
<div id="about" data-slide="2" data-stellar-background-ratio="0.3" class="section-wrap section-about">
	<div class="section">
		<div class="about-content clearfix section-content">
			<div class="introli">
			  <span class="left_icon"><img class="bio-text bio-icon-1" src="images/bio-icon-1.png" data-stellar-ratio="0.7" ></span>
			  <span class="right_content "><img class="bio-text bio-text-1" src="images/bio-text-1.png" data-stellar-ratio="0.7" ></span>
			</div>
			<div class="introli">
			  <span class="left_icon"><img class="bio-text bio-icon-2" src="images/bio-icon-2.png" data-stellar-ratio="0.7" ></span>
			  <span class="right_content"><img class="bio-text bio-text-2" src="images/bio-text-2.png" data-stellar-ratio="0.7" ></span>
			</div>
			<div class="introli">
			  <span class="left_icon"><img class="bio-text bio-icon-3" src="images/bio-icon-3.png" data-stellar-ratio="0.7" ></span>
			  <span class="right_content"><img class="bio-text bio-text-3" src="images/bio-text-3.png" data-stellar-ratio="0.7" ></span>
			</div>
		</div>
	</div>
	<a class="button2 dark-button2 scroll-tip" style="background-position:0 -60px;" data-slide="3" title=""></a>
</div>
<div id="works" class="section-wrap section-works" data-slide="3" >
	<div class="section">
		<div class="works-content section-content">
			<h1>前端作品</h1>
			<div class="works-list clearfix">
				<div class="works-item first fade fade1">
					<a href="http:/www.cqetom.live/" target="_blank">
						<img src="images/works/yizaojia.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>易造價官網</h2>
							<p><strong>開發時間</strong>:2014年3月<br>
							<strong>工作詳情</strong>:框架設計及前端制作。</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade2">
					<a href="http://sc.chinaz.com" target="_blank">
						<img src="images/works/91zaojia.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>易造價商城</h2>
							<p><strong>開發時間</strong>:2013年10月<br>
							<strong>工作詳情</strong>:頁面設計及前端制作。</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade3">
					<a href="http:/www.cqetom.live/" target="_blank">
						<img src="images/works/wenku.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>易造價云文庫</h2>
							<p><strong>開發時間</strong>:2013年12月<br>
							<strong>工作詳情</strong>:頁面設計及前端綁定和制作。</p>
						</div>
					</a>
				</div>
				<div class="works-item first fade fade4">
					<a href="http:/www.cqetom.live/" target="_blank">
						<img src="images/works/shinedeliver.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>興安得力官網</h2>
							<p><strong>開發時間</strong>:2012年11月<br>
							<strong>工作詳情</strong>:獨立開發和制作。</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade2">
					<a>
						<img src="images/works/wxshop.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>微信商城</h2>
							<p><strong>開發時間</strong>:2014年05月<br>
							<strong>工作詳情</strong>:前端頁面開發及綁定。</p>
						</div>
					</a>
				</div>
			</div>
			<a class="more-link" href="page/product">查看更多</a>
		</div>
		<a class="button2 scroll-tip fade fade4" data-slide="4" title="">向下滾動</a>
	</div>
</div>
<div id="skill" class="section-wrap section-skill" data-slide="4">
	<div class="section">
		<div class="skill-content section-content">
			<h1>相關技能</h1>
			<ul>
				<li class="fade fade1">熟練掌握語義化的 HTML 和具有兼容性的 CSS 模式,熟練手寫符合 W3C 標準的結構和代碼。</li>
				<li class="fade fade3">對 可用性、可訪問性、前端性能優化、最優實踐 等有一定的了解和實踐。</li>
				<li class="fade fade2">對 HTML5 和 CSS3 有一定了解。</li>
				<li class="fade fade4">熟練掌握 ST2 、Emmet、Sass 等等前端開發和團隊協作工具。</li>
				<li class="fade fade4">熟練掌握 jQuery,實現日常需要的交互效果。</li>
				<li class="fade fade3">熟悉EXTJS,Nodejs,MySQl,有一定 PHP 后端相關知識。</li>
				<li class="fade fade2">了解 Ajax 工作原理和實現方法。</li>
				<li class="fade fade2">對前端canvas,svg有一定了解。</li>
				<li class="fade fade1">了解手機前端開發jquerymobile,zeptojs及angularjs等。</li>
				<li class="fade fade4">服務器使用阿里云ECS,對 Linux 有一定了解。</li>
				<li class="fade fade2">喜歡接觸新事物,有一定的自學能力。</li>
			</ul>
		</div>
	</div>
	<a class="button2 scroll-tip fade fade4"  data-slide="5" title="">向下滾動</a>
</div>
<div id="contact" class="section-wrap section-contact" data-slide="5">
	<div class="section">
		<div class="contact-content clearfix section-content">
			<h1>聯系本人</h1>
			<div class="left">
				<div class="contact-ways fade fade1">
					<h2>社交網絡</h2>
					<ul>
						<li>郵箱:</li>
						<li>Q Q :</li>
						<li>知乎:</li>
						<li>微博:</li>
						<li>Github:</li>
					</ul>
				</div>
				<div class="contact-info fade fade2">
					<p>雖然有社交網絡,但是平時上的比較少,很多時候是只看不發!不過你可以關注我哦!</p>
				</div>
			</div>
			<div class="right fade fade3">
				<h2>項目外包</h2>
				<p>如果你有前端相關的需求,可以聯系我做外包,目前我主要做:</p>
				<ul>
					<li>網站布局設計及制作,網站頁面制作。</li>
					<li>根據需求,對網站前端進行修改和優化,或者轉響應式處理。</li>
					<li>企業網站建設及相關功能開發。</li>
					<li>對于網站建設項目,我也有一些同行朋友可以推薦,也歡迎咨詢!</li>
				</ul>
		</div>
	</div>
	<a class="button2 button2-2-top scroll-tip" id="gototops" data-slide="1" href="#top" style="background-position: -60px 0;width:80px;height:80px;" title=""></a>
</div>
<div class="overlay"></div>
<div class="state-indicator"></div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 切換按鈕 表單 表單美化 表單插件 表單美化插件 全屏滾動 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子