最近在看视差滚动的原理和实现方法。最简单的是使用css的属性background-attachment: fixed || scroll || local,使用这个便可以实现简单的视差滚动效果，但是想完成一些更加炫酷的效果。就得使用js啦，其中最简单的莫过于使用parallax。js插件。
下面有个使用该插件的html代码（ps：这个代码是从网上扒的，里面的一些js的引用还有图片都是网上的资源，所以必须要联网才能看到效果）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
.promo {
width: 100%;
height: 630px;
border-top: 1px solid #c4c7cb;
background: url(http://www.digitalhands.net/images/header_bg_back.jpg) no-repeat top center;
}
#parallax {
position: relative;
margin: 0 auto;
overflow: hidden;
height: 630px;
width: 100%;
background: url(http://www.digitalhands.net/images/header_bg.jpg) no-repeat center top !important;
}
#parallax .bg1 {
width: 1602px;
height: 603px;
background: url(http://www.digitalhands.net/images/drops_bg_up.png) no-repeat 0 0;
}
#parallax .bg2 {
width: 1602px;
height: 603px;
background: url(http://www.digitalhands.net/images/drops_bg_back.png) no-repeat 0 0;
}
#parallax .sloganBox {
width: 1200px;
position: absolute;
left: 50%;
height: 630px;
margin-left: -600px;
}
#parallax .slogan1 {
width: 1002px;
height: 410px;
background: url(http://www.digitalhands.net/images/text_yonlendiriyoruz_bg.png) no-repeat left 50px;
}
#parallax .slogan2 {
width: 1120px;
height: 450px;
background: url(http://www.digitalhands.net/images/text_uretiyoruz_bg.png) no-repeat right top;
}
#parallax .slogan3 {
width: 1102px;
height: 500px;
background: url(http://www.digitalhands.net/images/text_vesonra_bg.png) no-repeat right bottom;
}
.parallax-viewport {
position: relative;
overflow: hidden;
}
.parallax-layer {
position: absolute;
}
.promoSlogan {
float: left;
position: relative;
width: 960px;
position: relative;
color: #8a8a8a;
margin: 0 auto;
margin-top: 50px;
padding-top: 7px;
background-image: url(http://www.digitalhands.net/images/promo_blockquote_bg.gif), url(http://www.digitalhands.net/images/promo_blockquote_bg_2.gif);
background-position: left center, right center;
background-repeat: no-repeat;
}
.promoSlogan p {
font-size: 21px;
line-height: 30px;
color: #8a8a8a;
text-align: left;
font-family: 'FuturaStdLightTrRegular';
margin-left: 42px;
}
.promoSlogan p em {
font-family: 'FuturaStdBookTrRegular';
font-style: normal;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://wow.techbrood.com/libs/jquery/jquery1.8.1.js"></script>
<script type="text/javascript" src="http://wow.techbrood.com/libs/jquery/jquery.jparallax.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#parallax .parallax-layer").parallax({}, {
// xparallax: "60%", //这里是插件的所有参数，大家可以一个个试试了解他们每一个的作用
yparallax: false,
// height: 630,
// calibrateX: false,
// calibrateY: true,
// invertX: false,
// invertY: true,
// limitX: false,
// limitY: 10,
// scalarX: 2,
// scalarY: 8,
// frictionX: 0.2,
// frictionY: 0.8,
// originX: 0.0,
// originY: 1.0
});
});
</script>
<!-- Top Promo -->
<div class="promo">
<div id="parallax" class="port parallax-viewport">
<div class="bg1 parallax-layer"></div>
<div class="bg2 parallax-layer"></div>
<div class="sloganBox">
<div class="slogan1 parallax-layer"></div>
<div class="slogan2 parallax-layer"></div>
<div class="slogan3 parallax-layer"></div>
</div>
</div>
</div>
<!-- //Top Promo -->
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-11-11 04:30:05