web-dev-qa-db-fra.com

Bootstrap 3 - effet d'image d'arrière-plan jumbotron

Salut, j'essaie de construire un site avec un jumbotron avec une image de fond, ce qui en soi n'est pas difficile:

HTML:

<div class="jumbotron">
...
</div>

CSS: (qui se trouve dans mon fichier css personnalisé et est chargé après 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;
}

Maintenant, cela crée un jumbotron avec une image d’arrière-plan, mais j’aimerais qu’il produise un effet que je trouve difficile à décrire mais que l’on voit sur cette page Web ici: http://www.andrewmunsell.com Vous pouvez voir que lorsque vous faites défiler le contenu du contenu jumbotron, etc., le type de défilement monte plus rapidement que l’image d’arrière-plan. Comment cet effet est-il appelé et est-il facile à obtenir avec bootstrap/html/css?

J'ai jeté un coup d'œil au code HTML de la paie, mais c'est un peu trop complexe à suivre pour le moment.

Merci, Ben.

EDIT: J'ai essayé d'obtenir l'effet par un exemple fourni par la première réponse, qui se trouve au niveau de la couche de démarrage.

Cependant, pour moi, l’arrière-plan s’affiche, puis dès qu’un rouleau défile un peu, l’ensemble de l’image disparaît. Si j'utilise le parchemin inertiel de Safari pour essayer de faire défiler au-delà du haut de la page, l'arrière-plan tente de revenir dans la vue. Je pense donc que l'image est chargée correctement. Dès que le défilement est légèrement modifié, la hauteur est étant manipulé dans une telle distance l'image est déplacée totalement de l'écran. Ci-dessous se trouve mon code HTML (un peu moche dans lequel les onglets sont placés, mais Jekyll l'a assemblé en incluant l'en-tête Jumbotron dans lequel j'essaie de créer l'effet de parallaxe, le contenu de la page et un pied de page. 

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>

Vous voyez où j'ai inclus le Javascript près du sommet et le div de la classe bg, puis le jumbotron.

Mon CSS est:

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;
}
htmlcsstwitter-bootstrap-3webpage
53
Ward9250

Exemple: http://bootply.com/103783

Une façon d'y parvenir consiste à utiliser un conteneur position:fixed pour l'image d'arrière-plan et à le placer en dehors du .jumbotron. Faites en sorte que le conteneur bg ait la même hauteur que .jumbotron et centrez l’image d’arrière-plan:

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;
}

Ensuite, utilisez jQuery pour réduire la hauteur de .jumbtron pendant le défilement de la fenêtre. Puisque l’image d’arrière-plan est centrée dans la DIV, elle s’ajuste en conséquence, ce qui crée un effet de parallaxe.

JavaScript

var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
    var scrolled = $(window).scrollTop();
    $('.bg').css('height', (jumboHeight-scrolled) + 'px');
}

$(window).scroll(function(e){
    parallax();
});

Démo

http://bootply.com/103783

62
Zim

Après avoir examiné le modèle de site Web que vous avez fourni, j’ai trouvé que l’auteur pourrait obtenir cet effet en utilisant une bibliothèque appelée Stellar.js , jetez un coup d’œil sur le site de la bibliothèque, bravo!

6
pikachu0

Je pense que ce que vous recherchez, c’est de garder l’image d’arrière-plan fixe et de déplacer le contenu au défilement. Pour cela, vous devez simplement utiliser la propriété css suivante:

attachement de fond: fixe;

0
rbhojan