QQTIM首页视差滚动效果案例
《QQ TIM》案例
html
在头部引入html5shiv.min.js文件，此处作用是判断浏览器是否是IE9以下版本的，
如果是，则执行兼容性文件，不是的话就跳过
沟通，是跨越千山万水的亲切的声音
无论何时何地，你都能自由享受QQ在各种终端上的高清通话，与好友一起想聊多久就聊多久
沟通，是随时随地爽快收发
通过QQ电脑和手机上的文件都能收发自如，更有手机在线查阅，轻松你的工作和生活
沟通，是志同道合的放肆的青春
既是世界很大，你也不会孤单，在兴趣部落有和你一样的人，期待着和你一起发现精彩
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: 幼圆;
}
js
Stellar插件
-
描述
- 视差滚动（Parallax Scrolling）指网页滚动过程中，
多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术
主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。
这种效果可以给网站一个很好的补充。
- 视差滚动（Parallax Scrolling）指网页滚动过程中，
-
特性
- 视差滚动效果酷炫，适合于个性展示的场合。
- 视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。
- 视差滚动容易迷航，需要具备较强的导航功能。
-
原理
- 传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，
而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。
有的时候也可以加上一些透明度、大小的动画来优化显示。利用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倍。如果值为小数时最好在样式表中设置 |