web-dev-qa-db-ja.com

ブートストラップ3 - ジャンボトロン背景画像効果

こんにちは私は背景画像付きのジャンボトロンでサイトを構築しようとしていますが、それ自体は難しいことではありません。

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

これで背景画像付きのジャンボトロンが作成されましたが、説明するのは難しいと思いますがここでこのWebページに表示されている効果を実行したいと思います。 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を、そして次にジャンボトロンを含めた場所を見ます。

私の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;
}
htmlcsstwitter-bootstrap-3webpage
54
Ward9250

例： http://bootply.com/10378

これを実現する1つの方法は、背景画像に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();
});

デモ

http://bootply.com/10378

63
Zim

あなたが提供したサンプルWebサイトを調べた後、著者が Stellar.js というライブラリを使用することで効果を達成できる可能性があることに気付きました。

6
pikachu0

私はあなたが探しているのは背景画像を固定したままスクロールで内容を動かすことだと思います。そのためには、単に次のcssプロパティを使用する必要があります。

背景添付ファイル：修正。

0
rbhojan