jquery css3页面滚动动画_专题页面滚动展示



121 482 161



特效描述:页面滚动动画 专题页面滚动 页面滚动展示,全屏展示 以及各种特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/hamer-a.css" />
<link rel="stylesheet" href="css/hamer-b.css" />
<link rel="stylesheet" href="css/hamer-c.css" />
<link rel="stylesheet" href="css/hamer-d.css" />
<link rel="stylesheet" href="css/hamer-e.css" />
<link rel="stylesheet" href="css/hamer-f.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script src="js/hamer-a.js"></script>
<script src="js/hamer-b.js"></script>
<script src="js/hamer-c.js"></script>
<script src="js/hamer-d.js"></script>
<script src="js/hamer-e.js"></script>
<script src="js/hamer-f.js"></script>
<script src="js/hamer-g.js"></script>

3. HTML代码

 <nav class="fixed">
    <div class="midnightHeader default"> 
 	<div class="logo-holder"> 
    <a class="logo"><span class="screenreader"></span></a> 
	<div class="c_subNav">
 <ul>
  <li class="li charges">
   <a href="#top" target="_self"  class="option"><span style="margin-left:30px; white-space:nowrap;">网站首页</span></a>
  </li>
  <li class="li biz">
   <a  href="#lv" target="_self" class="option"><span style="margin-left:30px; white-space:nowrap;">品牌故事</span></a>
   <ul style="margin-top:-10px;">
    <li class="li">
     <a  href="#lv" target="_self" class="option"><span>企业简介</span></a>
    </li>
    <li class="li">
     <a  href="#lv" target="_self" class="option"><span>企业远景</span></a>
    </li>
    <li class="li">
     <a  href="#lv" target="_self" class="option"><span>品牌理念</span></a>
    </li>
   <li class="li">
     <a  href="#lv" target="_self" class="option"><span>logo释义</span></a>
     </li>
    <li class="li">
     <a  href="#lv" target="_self" class="option"><span>品牌定位</span></a>
     </li>
    <li class="li">
     <a  href="#lv" target="_self" class="option"><span>品牌远景</span></a>
    </li>
   </ul>
  </li>
  <li class="li change">
   <a href="#product" target="_self"   class="option"><span style="margin-left:30px; white-space:nowrap;"> 系列产品</span></a>
   <ul>
    <li class="li"><a href="#product" target="_self"  class="option" style="white-space:nowrap;">水润养护花容剔透面膜</a></li>
   </ul>
  </li>
  <li class="li score">
   <a href="#move" target="_self" class="option"><span style="margin-left:30px; white-space:nowrap;">最新动态</span></a>
  </li>
  <li class="li server">
   <a href="#agent" target="_self"  class="option"><span style="margin-left:30px; white-space:nowrap;">代理查询</span></a>
  </li>
  <li class="li change">
   <a href="#contact" target="_self" class="option"><span style="margin-left:30px; white-space:nowrap;">联系我们</span></a>
  </li>
 </ul>
</div>
</div> 
</div> 
</nav> 
  <div class="first-background" data-midnight="white"> 
   <!-- Hi! --> 
  </div> 
  <header data-midnight="black"> 
  <a name="top" id="top"></a>
   <div class="container"> 
    <div class="scroll-prompt wow fadeInUp"></div> 
    <figure id="space-island"> 
     <img class="wow fadeInUp" src="images/space-island.jpg" /> 
    </figure> 
   </div> 
  </header> 
  <!-- 1 --> 
  <section class="step step-one" data-midnight="blue"> 
  <a name="lv" id="lv"></a>
	<div class="wrap">
		<div class="pic1 pic">
			<div class="pic_num1 pic_num"></div>
		</div>
		<div class="pic2 pic">
			<div class="pic_num2 pic_num"></div>
		</div>
		<div class="pic3 pic">
			<div class="pic_num3 pic_num"></div>
		</div>
		<div class="pic4 pic">
			<div class="pic_num4 pic_num"></div>
		</div>
		<div class="pic5 pic">
			<div class="pic_num5 pic_num"></div>
		</div>
		<div class="pic6 pic">
			<div class="pic_num6 pic_num"></div>
		</div>
	</div>
  </section> 
  <!-- 2 --> 
  <section class="step step-two" data-midnight="light"> 
  <a name="product" id="top"></a>
   <div class="container"> 
    <div class="instructions wow fadeInLeft"> 
     <img src="images/left_a.png" width="450" style="margin-left: 9%;padding-top: 7%;" /> 
    </div> 
    <pre class="line-numbers wow fadeInRight"><img src="images/right_a.png" width="440" style="margin-left:24%;" /></pre> 
   </div> 
  </section> 
  <!-- 3 --> 
  <section class="step step-three"> 
   <div class="container"> 
    <div class="instructions wow fadeInLeft"> 
     <img src="images/left_b.png" width="450" style="margin-left: 9%;padding-top: 7%;" /> 
    </div> 
    <pre class="line-numbers wow fadeInRight"><img src="images/right_b.png" width="450" style="margin-left:24%;" /></pre> 
   </div> 
  </section> 
  <!-- 4 --> 
  <section class="step step-four"> 
   <div class="container"> 
    <div class="instructions wow fadeInLeft"> 
     <img src="images/left_c.png" width="450" style="margin-left: 9%;padding-top: 7%;" /> 
    </div> 
    <pre class="line-numbers wow fadeInRight"><img src="images/right_c.png" width="450" style="margin-left:24%;" /></pre> 
   </div> 
  </section> 
  <!-- 5--> 
  <section class="step step-five" > 
   <div class="container"> 
    <div class="instructions wow fadeInLeft"> 
     <img src="images/left_d.png" width="450" style="margin-left: 9%;padding-top: 7%;" /> 
    </div> 
    <pre class="line-numbers wow fadeInRight"><img src="images/right_d.png" width="450" style="margin-left:24%;" /></pre> 
   </div> 
  </section>
   <!-- 6 --> 
  <section class="step step-six" > 
   <a name="move" id="top"></a>
	<div class="container">
	<section class="main">
	<ul class="timeline">
		<li class="event">
		<input type="radio" name="tl-group" checked/>
		<label></label>
		<div class="thumb user-1">
			<span>10.25</span>
		</div>
		<div class="content-perspective">
			<div class="content">
				<div class="content-inner">
					<h3>"美丽与财富有约"——芙焕美品牌见面会</h3>
					<p>
						继ceo商城项目之后,芙焕美水润养护花容剔透面膜荣耀问世。公司于2014年10月25日举办"美丽与财富有约"暨芙焕美品牌见面会。讲师详细阐述了芙焕美品牌的理念以及运营<br>
						思维:品牌理念为打造口碑第一,品质第一,让客户用的放心,利用互联网思维,推出一款让客户尖叫的产品。品牌以全新的互联网思维+O2O模式+团队的思维+网状式的发展,<br>
						欲打造一个空前浩大的商业市场。
					</p>
				</div>
			</div>
		</div>
		</li>
		<li class="event">
		<input type="radio" name="tl-group"/>
		<label></label>
		<div class="thumb user-2">
			<span>11.2</span>
		</div>
		<div class="content-perspective">
			<div class="content">
				<div class="content-inner">
					<h3>安徽各大区域代理交流会</h3>
					<p>
						在芙焕美的邀请下,数十名安徽省各大区域代理欢聚在合肥名流紫蓬湾高尔夫俱乐部,在轻松的氛围下,互相交流着,探讨前景,分析市场。并达成了多重共识和品牌远景,<br>
						确定阶段性目标。
					</p>
				</div>
			</div>
		</div>
		</li>
		<li class="event">
		<input type="radio" name="tl-group"/>
		<label></label>
		<div class="thumb user-3">
			<span>11.10</span>
		</div>
		<div class="content-perspective">
			<div class="content">
				<div class="content-inner">
					<h3>芙焕美微信课堂</h3>
					<p>
						在公司总裁徐炽辉先生的带领下,芙焕美微信课堂如期开课,带着各大区域代理、客户的期盼,徐总亲自讲解分析了微商的三势(事业—市场—趋势),"三势来袭"的概念广泛的<br>
						被参会人员了解、认知,也对我们的市场有了更进一步的了解。
					</p>
				</div>
			</div>
		</div>
		</li>
	</ul>
	</section>
</div>
</section> 
   <!-- 7 --> 
  <section class="step step-seven full-height" style=" height:300px;"> 
  <a name="agent" id="top"></a>
<div id="LoopDiv" style="margin-top:-200px;">
	<input id="S_Num" type="hidden" value="8"/>
	<div id="starsIF" class="imageflow">
		<img src="images/211414202_R.png" width="196" height="210" alt="杨颖"/>
		<img src="images/195739743_R.jpg" width="196" height="210" alt="霍思燕"/>
		<img src="images/184449150_R.png" width="196" height="210" alt="马苏"/>
		<img src="images/171852304_R.png" width="196" height="210" alt="杜淳"/>
		<img src="images/195359252_R.jpg" width="196" height="210" alt="冯绍峰"/>
		<img src="images/205427556_R.jpg" width="196" height="210" alt="沙溢"/>
	</div>
	<div style="margin:0 auto; width:300px; ">
		<p style="font-size:22px; margin-top:20px;">
			<a href="" style="color:#FFF; font-family:'Comic Sans MS', cursive; margin-top:30px;">芙焕美授权经销商查询入口</a>
		</p>
	</div>
</div>
	</section>
    <!-- 8 --> 
 <section class="step step-eight full-height" data-midnight="white">
<a name="contact" id="top"></a>
<div class="container">
	<div class="instructions wow fadeInLeft">
		<img src="images/left_e.png" width="450" style="margin-left: 9%;padding-top: 7%;"/>
	</div>
	<pre class="line-numbers wow fadeInRight">
		<img src="images/right_e .png" width="350" style="margin-left:24%; margin-top:10%"/>
	</pre>
</div>
</section>
<!-- 9 -->
<section class="step step-nine full-height" data-midnight="white">
<div style=" width:300px; text-align:center; margin:0 auto; margin-top:300px;">
	<strong style="30px; margin-top:100px;color:#FFF;">©上海新百萃科技有限公司</strong>
	<p>
		<strong style="30px; margin-top:100px;color:#FFF;">版权所有,并保留所有权利</strong>
	</p>
</div>
</section>



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


热门标签: 加载动画 全屏焦点图 收缩展开 展开收缩 收缩 展开 h5弹窗动画 html5弹窗动画 全屏切换 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 收缩菜单 收缩导航 图片全屏 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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