War*_*250 54 html css webpage twitter-bootstrap-3
嗨,我正在尝试建立一个带有背景图像的jumbotron网站,这本身并不难:
HTML:
<div class="jumbotron">
...
</div>
CSS :(位于我的自定义css文件中,并在css之后加载).
.jumbotron {
margin-bottom: 0px;
background-image: url(../img/jumbotronbackground.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
现在这创建了一个带有背景图像的jumbotron,但我想让它做一个我觉得难以描述的效果,但在这个网页上 可以看到:http://www.andrewmunsell.com你可以看到滚动jumbotron内容文本等比背景图像更快地向上滚动.这个效果叫什么,用bootstrap/html/css很容易实现？
我已经看过付费的HTML了,但这对我来说有点太复杂了.
谢谢,本.
编辑:我试图通过第一个答案提供的示例来获得效果,该答案位于引导层.
然而对我来说,背景图像显示出来,然后只要滚动一点点,整个图像就会消失.如果我使用safari的惯性滚动尝试滚动超出页面顶部,背景会再次向下移动到视图中,所以我认为图像是正确加载的,然后只要滚动一点点,高度就是在这样的情况下操纵图像完全移动屏幕.下面是我的HTML,(在标签放置的地方有点难看,但是Jekyll把它放在一起,包括Jumbotron标题,我正试图制作视差效果,页面内容和页面页脚.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hybridisation Recombination and Introgression Detection and Dating</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Site for the HybRIDS R package for analysing recombination signal in DNA sequences">
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css" type="text/css"/>
<style>
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type='text/javascript'>
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
</script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></sc\
ript>
<![endif]-->
</head>
<body>
<div class="bg"></div>
<div class="jumbotron">
<div class="row">
<div class="col-lg-4">
<img src="./img/HybRIDSlogo.png" class="img-rounded">
</div>
<div class="col-lg-8">
<div class="page-header">
<h2> Hybridisation Recombination and Introgression Detection and Dating </h2>
<p> <h2> <small> Easy detection, dating, and visualisation for recombination, introgression and hybridisation events in genomes. </small> </h2> </p>
</div>
</div>
</div>
</div>
<!-- End of JumboTron -->
<div class="container">
PAGE CONTENT HERE
<!-- Close the container that is opened up in header.html -->
</div>
</body>
</html>
你看到我在顶部附近的Javascript和类bg的div,然后是jumbotron.
我的CSS是:
body {
background-color: #333333;
padding-bottom: 100px;
}
.bg {
background: url('../img/carouelbackground.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 350px;
top:0;
left:0;
z-index: -1;
}
.jumbotron {
margin-bottom: 0px;
height: 350px;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
background: transparent;
}
Zim*_*Zim 63
实现此目的的一种方法是使用position:fixed容器作为背景图像并将其放在背景图像之外.jumbotron.使bg容器与.jumbotron背景图像的高度相同:
background: url('/assets/example/...jpg') no-repeat center center;
CSS
.bg {
background: url('/assets/example/bg_blueplane.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 350px; /*same height as jumbotron */
top:0;
left:0;
z-index: -1;
}
.jumbotron {
margin-bottom: 0px;
height: 350px;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
background:transparent;
}
然后使用jQuery降低.jumbtron窗口滚动时的高度.由于背景图像在DIV中居,因此会相应调整 - 产生视差效果.
JavaScript的
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
演示