我要重新设计我的网站，我想通过一些视差效果使它更有趣。所以这是我的想法:我想要 3 个盒子，它们相互重叠(并使 2. 和 3. 盒子模糊，但现在没关系)。我会把它放在网站的顶部。所以这是视差的东西:我希望它随着滚动而移动，就像这样: PICTURE
我试图搜索它，或者自己编码，但我失败了:(
有没有人有一些很酷的东西可以做到这一点？
最佳答案
这绝对是您的页面:
http://stephband.info/jparallax/
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="" />
<meta name="description" content="" />
<title>jQuery.parallax</title>
<script>document.documentElement.className = 'js';</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Force latest IE rendering engine & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Make IE recognise HTML5 elements for styling -->
<!--[if lte IE 8]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<noscript>
<strong>Warning!</strong>
Your browser does not support HTML5 so some elements on this page are simulated using JScript. Unfortunately your browser has JScript disabled. Please enable it in order to display this page.
</noscript>
<![endif]-->
<!-- Disable image toolbar in IE6 -->
<!--[if lte IE 6]><meta http-equiv="imagetoolbar" content="no" /><![endif]-->
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.min.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.theme.min.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/site.layout.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/docs.classes.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/demos.theme.css" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="http://stephband.info/css/template.layout.32em.css" media="all" />
<link rel="stylesheet" href="http://stephband.info/css/template.layout.48em.css" media="all" />
<![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie8.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://stephband.infocss/template.ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="http://stephband.infocss/template.ie6.css" /><![endif]-->
<link rel="stylesheet" href="../css/jquery.parallax.css" />
<style type="text/css" media="screen, projection">
#wrapper {
width: 60em;
}
.button {
background: #2f3134;
float: left;
position: relative;
width: 60px; height: 60px;
margin: 3.2em 3.2em 0 0;
}
#viewport {
float: left; position: relative; background: #2f3134;
width: 60px; height: 60px; margin: 6.4em 3.2em 0 2.4em;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
#mouseport {
float: left; position: relative; background: #2f3134;
width: 60px; height: 60px; margin: 6.4em 3.2em 0 0;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.layer_1 { position: absolute; width: 45px; height: 45px; z-index: 101; }
.layer_2 { position: absolute; width: 48px; height: 48px; z-index: 102; }
.layer_3 { position: absolute; width: 52px; height: 52px; z-index: 103; }
.layer_4 { position: absolute; width: 58px; height: 58px; z-index: 104; }
.layer_5 { position: absolute; width: 67px; height: 67px; z-index: 105; }
.layer_6 { position: absolute; width: 80px; height: 80px; z-index: 106; }
.tl, .tr, .bl, .br {
width: 11px; height: 11px;
}
.tl { background: url('http://stephband.info/images/corner_dark_tl.png'); }
.tr { background: url('http://stephband.info/images/corner_dark_tr.png'); }
.bl { background: url('http://stephband.info/images/corner_dark_bl.png'); }
.br { background: url('http://stephband.info/images/corner_dark_br.png'); }
</style>
</head>
<body>
<header class="site_header" id="page_header">
<div class="site_wrap wrap">
<a class="logo_thumb thumb" href="http://stephband.info" title="stephband" rel="index">
<h1>stephband.info</h1>
</a>
</div>
</header>
<div class="site_wrap wrap">
<h2>jParallax Demos <a href="thumbnails.html">next</a></h2>
<div id="wrapper" class="clear">
<div id="viewport">
<!-- Parallax layers -->
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/1.png" alt="" class="layer_1"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/2.png" alt="" class="layer_2"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/3.png" alt="" class="layer_3"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/4.png" alt="" class="layer_4"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/5.png" alt="" class="layer_5"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/6.png" alt="" class="layer_6"/>
</div>
<div id="mouseport"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="../js/jquery.parallax.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// Set up parallax layers
jQuery("#viewport>img").parallax(
{ mouseport: jQuery("#mouseport") }, // Options
{ xparallax: '6px', yparallax: '6px' }, // Layer 1
{ xparallax: '12px', yparallax: '12px' }, // Layer 2
{ xparallax: '30px', yparallax: '30px' }, // Layer 3
{ xparallax: '54px', yparallax: '54px' }, // Layer 4
{ xparallax: '84px', yparallax: '84px' }, // Layer 5
{ xparallax: '120px', yparallax: '120px' } // Layer 6
);
});
</script>
</body>
</html>
希望这能激发您的创造力!
关于javascript - 具有视差效果的 DIV 叠加层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20179137/