html - dentro - Bootstrap 3-efecto de imagen de fondo jumbotron
jumbotron con imagen (3)
Hola, estoy intentando crear un sitio con un jumbotron con una imagen de fondo, que en sí misma no es difícil:
HTML:
<div class="jumbotron">
...
</div>
CSS: (que se encuentra en mi archivo css personalizado y se carga después de todo 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;
}
Ahora, esto crea un jumbotron con una imagen de fondo, pero me gustaría hacerlo para que tenga un efecto que me resulta difícil de describir, pero que se ve en esta página web aquí: http://www.andrewmunsell.com Puedes ver cómo te desplazas el tipo de texto de contenido jumbotron, etc. se desplaza hacia arriba más rápido que la imagen de fondo. ¿Cómo se llama este efecto y es fácil de lograr con bootstrap / html / css?
He echado un vistazo al HTML del pago, pero es un poco demasiado complejo para seguirlo en este momento.
Gracias, Ben.
EDITAR: Intenté obtener el efecto con un ejemplo proporcionado por la primera respuesta, que se encuentra en la capa de arranque.
Sin embargo, para mí, la imagen de fondo aparece, y tan pronto como un desplazamiento, incluso un poco, la imagen completa desaparece. Si utilizo el desplazamiento inercial de Safari para intentar desplazarme más allá de la parte superior de la página, el fondo intenta volver a la vista, por lo que creo que la imagen está cargada correctamente, y tan pronto como un desplazamiento, incluso un poco, la altura es siendo manipulado de esa manera, la imagen se mueve totalmente de la pantalla. A continuación está mi HTML, (un poco feo en donde se colocan las pestañas pero Jekyll lo resume incluyendo el encabezado de Jumbotron para el que estoy tratando de crear el efecto de paralaje, el contenido de la página y el pie de página).
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>
Verás donde he incluido el Javascript cerca de la parte superior y el div de la clase bg y luego el jumbotron.
Mi CSS es:
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;
}
Ejemplo: http://bootply.com/103783
Una forma de lograr esto es usando una position:fixed contenedor position:fixed para la imagen de fondo y colóquelo fuera del .jumbotron . Haga que el contenedor bg .jumbotron la misma altura que el .jumbotron y centre la imagen de fondo:
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;
}
Luego use jQuery para disminuir la altura de .jumbtron medida que la ventana se desplaza. Dado que la imagen de fondo está centrada en el DIV, se ajustará en consecuencia, creando un efecto de paralaje.
JavaScript
var jumboHeight = $(''.jumbotron'').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$(''.bg'').css(''height'', (jumboHeight-scrolled) + ''px'');
}
$(window).scroll(function(e){
parallax();
});
Manifestación
Creo que lo que estás buscando es mantener fija la imagen de fondo y simplemente mover el contenido en scroll. Para eso, simplemente tiene que usar la siguiente propiedad css:
background-attachment: fijo;
Después de inspeccionar el sitio web de muestra que proporcionó, descubrí que el autor podría lograr el efecto utilizando una biblioteca llamada Stellar.js , eche un vistazo al sitio de la biblioteca, ¡aplausos!