全屏視差背景
[英]Full screen parallax background
問題描述
我正在學習如何使用jParallax jQuery插件使用視差效果。 到目前為止，我所做的工作正常，但我需要使視差影響整個屏幕。 我將其應用於body標簽，但這顯然不起作用。 下面是它的外觀。
這是代碼。
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.parallax.css" />
<style type="text/css">
.parallax-viewport {
height:20em;
max-width:60em;
width:100%;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.parallax.js"></script>
<script type="text/javascript" src="js/jquery.event.frame.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#parallax .parallax-layer')
.parallax({
mouseport: $('#parallax')
});
});
</script>
</head>
<body id="parallax" class="parallax-viewport">
<div class="parallax-layer" style="width:600px; height:274px;">
<img src="images/background_layers/bottom_layer.png" />
</div>
<div class="parallax-layer" style="width:1100px; height:284px;">
<img src="images/background_layers/mid_layer.png" />
</div>
<div class="parallax-layer" style="width:1360px; height:320px;">
<img src="images/background_layers/top_layer.png" />
</div>
</body>
</html>
如何用視差背景填充整個屏幕？
1 個解決方案
解決方案1
0 2012-11-16 18:56:30
您可以嘗試將.parallax-viewport高度從20em更改為； 至100％
如何為視差站點制作全屏部分？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.