css 滚动切换视差特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 38 13



特效描述:滚动切换视差。让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。

代码结构

1. 引入CSS

<link href="css/global.css" rel="stylesheet" type="text/css">
<link href="css/global.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/default.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/default.js" type="text/javascript"></script>

3. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- saved from url=(0052)http://www.usunhome.com.cn/default.html#userconsent# -->

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title></title>

<meta name="keywords" content="">

<meta name="description" content="">  

    <link href="css/global.css" rel="stylesheet" type="text/css">  

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>  

    <script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script>  

    <script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>  

    <script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>    

    <script src="js/default.js" type="text/javascript"></script>    

</head>    

<body id="default">     

    <div class="pageWidth" id="box_root"> 

      <!-- 头部导航开始 -->  

      <div id="nav"> 

	<a href="index.html" title="返回引导页" class="logo_a">域上和美</a>

        <ul id="menu"> 

          <li class="" id="mn_home">

            <a href="index.html#home">网站首页</a>

          </li>  

          <li id="mn_about" class="selected">

            <a href="index.html#about">域上和美</a>

          </li>  

          <li id="mn_news">

            <a href="index.html#news">新闻资讯</a>

          </li>  

          <li id="mn_products" class="">

            <a href="index.html#products">核心项目</a>

          </li>  

          <li id="mn_chanye" class="">

            <a href="index.html#sector">产业板块</a>

          </li>  

          <li id="mn_about" class="">

            <a href="index.html#famous">名家寄语</a>

          </li>  

          <li class="last" id="mn_contact">

            <a href="index.html#contact">联系我们</a>

          </li>   

        </ul> 

      </div>  

      <div class="top_rim"> 

        <a href="index.html#home">回到顶部</a> 

      </div>  

      <!-- 头部导航结束 -->  

      <div id="box_main"> 

        <div id="home" style="background-position: 50% -110px;"> 

          <div class="sprite1" style="background-position: 50% 550px;"></div>  

          <div class="sprite" style="background-position: 50% 0px;"></div>  

          <div class="screen"></div> 

        </div>  

        <div id="about" style="background-position: 50% -110px;"> 

          <div class="contents"> 

            <div class="about_rim"> 

              <div class="columnSpace" id="elem-FrontSpecifies_show01-1367889271850" name="说明页">

                <!-- 装饰器样式开始 -->

<div class="border_05">

  <div class="border_05-topr">

    <div class="border_05-topl">

    </div>

  </div>

  <div class="border_05-mid">

      <div class="borderContent"><div id="FrontSpecifies_show01-1367889271850" class="FrontSpecifies_show01-d3_c1"><div class="comptitle_05"><em><span class="extendLink"><a href="index.html#about_cont" target="_self">更多详情 +</a></span></em></div><div class="describe htmledit">

       <div class="about_txt">

	     </div></div>

</div>

	  <div class="clearBoth"></div></div>

  </div>

</div>

<!-- 装饰器样式结束 -->

              </div> 

            </div> 

          </div>  

          <div class="sprite" style="background-position: 50% 0px;"></div>  

          <div class="screen" style="background-position: 50% 550px;"></div> 

        </div>  

        <div id="about_cont" style="background-position: 50% 0px;"> 

          <div class="contents"> 

            <div class="about_rim"> 

              <p>关于我们</p>

            </div> 

          </div>  

          <div class="sprite" style="background-position: 50% 0px;"></div>  

          <div class="screen" style="background-position: 50% 550px;"></div>  

          <div class="screen1" style="background-position: 50% 110px;"></div> 

        </div>  

        <div id="news" style="background-position: 50% -110px;"> 

          <div class="contents"> 

            <div id="box_news"> 

             <p>新闻资讯</p>

            </div> 

          </div> 

        </div>  

        <div id="products" style="background-position: 50% -110px;"> 

          <div class="pro_list"> 

           <p>核心项目</p>

          </div>  

          <div class="sprite" style="background-position: 50% 0px;"></div>  

          <div class="screen" style="background-position: 50% 220px;"></div> 

        </div>  

        <div id="sector" style="background-position: 50% -110px;"> 

          <div class="contents"> 

            <div class="sector_img"> 

             <p>产业模块</p>

            </div> 

          </div>  

          <div class="screen" style="background-position: 50% 550px;"></div>  

          <div class="sprite" style="background-position: 50% 0px;"></div> 

        </div>  

        <div id="famous" style="background-position: 50% -90px;"> 

          <div class="contents"> 

            <div class="famous_rim"> 

             <p>名家寄语</p>

            </div> 

          </div>  

          <div class="sprite" style="background-position: 50% 450px;"></div> 

        </div>  

        <div id="contact"> 

          <div class="contents"> 

            <div id="box_contact"> 

              <div class="columnSpace" id="elem-FrontSpecifies_show01-1368432548167" name="说明页">

                <div id="FrontSpecifies_show01-1368432548167" class="FrontSpecifies_show01-d3_c1"><div class="describe htmledit">

      </div>

</div>

              </div>

            </div>  

          </div>  

          <div class="sprite" style="background-position: 50% 0px;"></div>  

          <div class="screen"></div> 

        </div> 

      </div>  

    </div> 

</body></html>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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