QQTIM首页视差滚动效果案例

《QQ TIM》案例

html
在头部引入html5shiv.min.js文件，此处作用是判断浏览器是否是IE9以下版本的，
如果是，则执行兼容性文件，不是的话就跳过

    <!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><![endif]-->

<body>
<div class="all"><!--第一页--><div class="banner"><!--导航--><nav class="navv"><div class="nav_brand"><img src="../QQTIM/images/nav_brand.png" alt=""></div><ul class="sul"><li><a href="https://office.qq.com/">首页</a></li><li><a href="https://office.qq.com/download.html">下载</a></li><li><a href="">动态</a></li></ul><span class="zhuce"><a href="">注册</a></span><ul class="login"><li><a href="">登录</a></li><li><a href="">QQ会员</a></li><li><a href="">QQ安全</a></li></ul><span class="nowMan">当前在线人数：227,333,246</span></nav><!--宣传页--><div class="banner-logo"><img src="../QQTIM/images/banner-logo.png" alt=""></div><div class="download"><img src="../QQTIM/images/banner-download.png" alt=""></div><div class="banner-list"><img src="../QQTIM/images/banner-list.png" alt=""></div><div class="banner-product"></div></div><!--第二页--><div class="sound"><div class="sound-text"></div><!--此处页面需要实现视察滚动的效果 所以我们需要用到data-stellar-background-ratio="0.5"的属性  0.5为默认滚动速度的一半--><div class="sound-bg" data-stellar-background-ratio="0.5"></div><div class="goutong"><div class="sound-phone"><img src="../QQTIM/images/sound-phone.png" alt=""></div><h1 class="text1">&emsp;&emsp;&emsp;&emsp;沟通，是跨越千山万水的亲切的声音</h1><p class="whatever">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;无论何时何地，你都能自由享受QQ在各种终端上的高清通话，与好友一起想聊多久就聊多久</p></div></div><!--第三页--><!--此处页面需要实现视察滚动的效果 所以我们需要用到data-stellar-background-ratio="0.5"的属性  0.5为默认滚动速度的一半--><div class="flie-bg" data-stellar-background-ratio="0.5"></div><!--第四页--><div class="four"><div class="file-mac"><img src="../QQTIM/images/file-mac.png" alt=""></div><h1 class="h1">沟通，是随时随地爽快收发</h1><p class="p1">通过QQ电脑和手机上的文件都能收发自如，更有手机在线查阅，轻松你的工作和生活</p></div><!--第五页--><section class="five"><!--此处页面需要实现视察滚动的效果 所以我们需要用到data-stellar-background-ratio="0.5"的属性  0.5为默认滚动速度的一半--><div class="interest-bg" data-stellar-background-ratio="0.5"></div><div class="five-bottom"><div class="interest-phone"><img src="../QQTIM/images/interest-phone.png" alt=""></div><h1 class="h1">沟通，是志同道合的放肆的青春</h1><p class="p1">既是世界很大，你也不会孤单，在兴趣部落有和你一样的人，期待着和你一起发现精彩</p></div></section><!--底部--><footer class="footer"><div class="div2"><div class="div1"><div class="footerImg1"></div><p>QQ手机版</p></div><div class="div1"><div class="footerImg2"></div><p>QQ&emsp;PC版</p></div><div class="div1"><div class="footerImg3"></div><p>QQ&emsp;Mac版</p></div><div class="div1"><div class="footerImg4"></div><p>QQ&emsp;平板版</p></div></div><div class="text3"><p class="p2">Copyright&nbsp;©&emsp;1997-2019&nbsp;Tencent All Right Reseved.</p><p class="p2">腾讯公司&emsp;版权所有</p></div></footer>
</div></body>

css

* {margin: 0;padding: 0;
}li {list-style: none;
}a {text-decoration: none;color: black;
}.all {width: 100%;height: 100%;
}.banner {background: url("../QQTIM/images/banner-bg.jpg") center no-repeat;background-size: 100% 100%;width: 100%;height: 965px;position: relative;
}.banner .navv {width: 100%;height: 150px;background: url("../QQTIM/images/nav_bg.png");position: relative;
}.banner .nav_brand {width: 93px;height: 44px;position: absolute;top: 30px;left: 140px;
}.banner .sul {position: absolute;top: 40px;left: 250px;
}.banner .sul li {float: left;margin: 0 30px;cursor: pointer;
}.banner .zhuce {position: absolute;top: 37px;left: 750px;
}.zhuce a {display: inline-block;width: 80px;height: 30px;border-radius: 20px;background-color: rgb(18, 183, 245);color: white;text-align: center;line-height: 30px;
}.banner .login {position: absolute;top: 0px;right: 180px;
}.banner .login li {float: left;height: 20px;line-height: 20px;font-size: 12px;margin: 20px;font-weight: bold;
}.banner .nowMan {width: 200px;height: 20px;line-height: 20px;text-align: center;display: inline-block;font-size: 12px;position: absolute;top: 50px;right: 200px;
}/*宣传页*/
.banner .banner-logo {width: 220px;height: 124px;position: absolute;left: 50%;margin-left: -110px;top: 200px;
}.banner .download {width: 240px;height: 53px;position: absolute;left: 50%;margin-left: -120px;top: 350px;
}.banner .banner-list {width: 812px;height: 147px;position: absolute;left: 50%;margin-left: -406px;margin-top: 300px;
}.banner .banner-product {width: 100%;height: 347px;position: absolute;background: url("../QQTIM/images/banner-product.png") no-repeat;background-size: 100% 100%;bottom: 0;
}/*第二页*/
.sound {width: 100%;
}.sound .sound-text {width: 100%;height: 321px;background: url("../QQTIM/images/sound-text.png") no-repeat;
}.sound .sound-bg {width: 100%;height: 800px;background: url("../QQTIM/images/sound-bg.jpg") no-repeat center ;
}.sound .goutong {width: 100%;background-color: #ffffff;height: 500px;position: relative;
}.sound .sound-phone {width: 664px;height: 764px;position: absolute;bottom: 0;left: 80px;
}.sound .text1 {position: absolute;width: 330px;top: 200px;right: 200px;
}.sound .whatever {position: absolute;width: 434px;top: 350px;right: 200px;
}.flie-bg {background: url("../QQTIM/images/file-bg.jpg") no-repeat;width: 100%;height: 800px;background-size: 100% 100%;
}/*第四页*/
.four {width: 100%;height: 500px;background-color: #ffffff;position: relative;
}.four .file-mac {width: 597px;height: 330px;position: absolute;top: 50%;margin-top: -165px;right: 100px;
}.four .h1 {width: 270px;position: absolute;top: 100px;left: 200px;
}.four .p1 {width: 275px;position: absolute;top: 230px;left: 200px;font-size: 14px;
}/*第五页*/
.five .interest-bg {width: 100%;height: 800px;background-size: 100% 100%;background: url("../QQTIM/images/interest-bg.jpg") no-repeat center;
}.five .five-bottom {width: 100%;height: 600px;background-color: #ffffff;position: relative;
}.five-bottom .interest-phone {position: absolute;width: 344px;height: 506px;bottom: 0;left: 200px;
}.five-bottom .h1 {width: 341px;position: absolute;top: 300px;right: 200px;font-size: 40px;
}.five-bottom .p1 {width: 341px;position: absolute;top: 450px;right: 200px;/*font-size: 14px;*/
}/*底部*/
.footer {width: 100%;height: 300px;background-color: rgb(42, 42, 42);overflow: hidden;position: relative;
}.footer .div1 {float: left;width: 80px;height: 90px;/*background-color: aqua;*/margin-left: 150px;
}.footer .footerImg1 {width: 80px;height: 60px;background: url("../QQTIM/images/footer.png") 0px 0;
}.footer .footerImg2 {width: 80px;height: 60px;background: url("../QQTIM/images/footer.png") -106px 0;
}
.footer .footerImg3 {width: 80px;height: 60px;background: url("../QQTIM/images/footer.png") -216px 0;
}
.footer .footerImg4 {width: 80px;height: 60px;background: url("../QQTIM/images/footer.png") -326px 0;
}
.footer .div1 p {font-size: 14px;text-align: center;color: gray;
}.footer .div2 {position: absolute;width: 934px;margin-top: 60px;/*margin-left: 100px;*/overflow: hidden;margin-bottom: 50px;margin-left: -462px;left: 50%;
}
.footer .text3{width: 400px;position: absolute;bottom: 30px;left: 50%;margin-left: -200px;
}
.footer .p2{text-align: center;color: gray;margin-top: 20px;font-family: 幼圆;
}

<!--引入jQuery文件-->
<script src="../QQTIM/js/jquery.min.js"></script>
<!--引入视差滚动插件-->
<script src="../QQTIM/js/jquery.stellar.js"></script>
<!--初始化插件-->
<script>$.stellar({horizontalScrolling: false,responsive: true});
</script>

Stellar插件

描述
- 视差滚动（Parallax Scrolling）指网页滚动过程中，
  多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术
  主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。
  这种效果可以给网站一个很好的补充。
特性
- 视差滚动效果酷炫，适合于个性展示的场合。
- 视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。
- 视差滚动容易迷航，需要具备较强的导航功能。
原理
- 传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，
  而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。
  有的时候也可以加上一些透明度、大小的动画来优化显示。利用background-attachment属性实现。
参数解释

名称	说明
horizontalScrolling 和 verticalScrolling	该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向，为布尔值，默认为true
responsive	该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false
hideDistantElements	该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false
data-stellar-ratio=“2”	定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。
data-stellar-background-ratio	该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。例如值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置

QQTIM首页视差滚动效果案例相关推荐

35个立体动感的视差滚动效果网站作品
这篇文章收集了35个具有立体动感效果的视差滚动网页设计作品分享给大家.视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今 ...
推荐六款帮助你实现惊艳视差滚动效果的 jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Pa ...
html背景自动切换带滚动,利用CSS固定背景交替实现视差滚动效果
利用CSS固定背景交替实现视差滚动效果 Sponsor 视差滚动效果的网页设计案例我们分享过很多,实现这个功能一般都需要JS,而且比较复杂.没关系,今天设计达人网小编向大家介绍另外一种简单的视差效果技 ...
【特别推荐】精心挑选的6款优秀的 jQuery 视差滚动效果插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Pa ...
超棒的视差滚动效果javascript类库 - Jarallax
为什么80%的码农都做不了架构师?>>> 日期:2012-9-27 来源:GBin1.com 如果你没有听说过视差滚动的话,说明你真out了,作为2011年最流行的网站设计效 ...
android 开机动画渐变,[Parallax Animation]实现知乎 Android 客户端启动页视差滚动效果...
前言 Parallax Scrolling (视差滚动),是一种常见的动画效果.视差一词来源于天文学,但在日常生活中也有它的身影.在疾驰的动车上看风景时,会发现越是离得近的,相对运动速度越快,而远处的 ...
html5视差滚动效果,视差滚动效果
插件描述:制作视差滚动效果 The meat and potatoes. Invoking these will move that page in from that side. parallax. ...
使用Skrollr创建视差滚动效果页面
视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.随着用户对视觉体验的要求不断提高,WEB开发者开始在网页中加入各种特效元素以 ...
40个视差滚动效果网站的新技术应用
视差滚动效果,是现代网页设计的趋势,,他是使用多个背景图片,但是移动背景不同步,.整体效果,给观众一个无缝的和有趣的浏览体验,这样的网站目前越来越流行,如果你会这样的技术,肯定是先学先收益,今天就给大 ...

QQTIM首页视差滚动效果案例

《QQ TIM》案例

Stellar插件

QQTIM首页视差滚动效果案例相关推荐

最新文章

热门文章