wake-up-neo.com

Bootstrap 3 - Jumbotron-Hintergrundbildeffekt

Hallo, ich versuche, eine Website mit einem Jumbotron mit einem Hintergrundbild zu erstellen, was an sich nicht schwer ist:

HTML:

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

CSS: (liegt in meiner benutzerdefinierten CSS-Datei und wird nach allem über CSS geladen).

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

Jetzt wird ein Jumbotron mit einem Hintergrundbild erstellt, aber ich möchte, dass es einen Effekt ausführt, der schwer zu beschreiben ist, aber auf dieser Website hier zu sehen ist: http://www.andrewmunsell.com .__ Sie können sehen, wie Sie den Jumbotron-Inhaltstext usw. scrollen, schneller als das Hintergrundbild. Wie heißt dieser Effekt und ist mit bootstrap/html/css leicht zu erreichen?

Ich habe mir den HTML-Code der Bezahlung angesehen, aber es ist zu komplex, als dass ich im Moment folgen könnte.

Danke, Ben.

BEARBEITEN: Ich habe versucht, den Effekt anhand eines Beispiels zu erzielen, das von der ersten Antwort bereitgestellt wird, die sich bei der Boot-Ply befindet.

Bei mir erscheint jedoch das Hintergrundbild, und sobald ein Bildlauf ein wenig ist, verschwindet das gesamte Bild. Wenn ich die Inertial-Scroll-Funktion von Safari verwende, um zu versuchen, über den oberen Rand der Seite zu scrollen, versucht der Hintergrund, wieder nach unten zu blicken. Ich denke, das Bild ist korrekt geladen, und sobald die Scroll-Funktion ein wenig ist, ist die Höhe der Ansicht Wird das Bild so manipuliert, wird das Bild vollständig vom Bildschirm bewegt. Unten ist mein HTML-Code (ein wenig hässlich, wo Tabulatoren platziert werden, aber Jekyll hat es zusammengefügt, indem der Jumbotron-Header eingefügt wurde, für den ich den Parallax-Effekt, den Seiteninhalt und einen Seitenfuß verwenden möchte.) 

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>

Du siehst, wo ich das Javascript in der Nähe der Spitze und das div der Klasse bg und dann das Jumbotron eingefügt habe.

Mein CSS ist:

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

Beispiel: http://bootply.com/103783

Eine Möglichkeit, dies zu erreichen, besteht darin, einen position:fixed-Container für das Hintergrundbild zu verwenden und ihn außerhalb des .jumbotron zu platzieren. Stellen Sie den bg-Container auf dieselbe Höhe wie der .jumbotron und zentrieren Sie das Hintergrundbild:

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

Verwenden Sie dann jQuery, um die Höhe von .jumbtron zu verringern, während das Fenster scrollt. Da das Hintergrundbild im DIV zentriert ist, passt es sich entsprechend an und erzeugt einen Parallax-Effekt.

JavaScript

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

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

Demo

http://bootply.com/103783

62
Zim

Nachdem ich die von Ihnen bereitgestellte Beispielwebsite durchgesehen hatte, stellte ich fest, dass der Autor die Wirkung mit einer Bibliothek namens Stellar.js erreichen könnte.

6
pikachu0

Ich denke, Sie suchen das fixierte Hintergrundbild und verschieben Sie den Inhalt einfach auf Bildlauf. Dazu müssen Sie einfach die folgende css-Eigenschaft verwenden:

hintergrundaufsatz: feststehend;

0
rbhojan