Bootstrap 3-jumbotron фоновое изображение эффект

Question

Bootstrap 3-jumbotron фоновое изображение эффект

Привет я пытаюсь построить сайт с 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 оплаты, но это немного слишком сложно для меня, чтобы следовать в данный момент.

спасибо, Бен.

EDIT: я попытался получить эффект на примере, приведенном в первом ответе, который находится в загрузочном слое.

однако для меня фоновое изображение появляется, и затем, как только прокрутите хотя бы немного, все изображение исчезнет. Если я использую инерционную прокрутку safari, чтобы попытаться прокрутить верхнюю часть страницы, фон снова пытается переместиться вниз, поэтому я думаю, что изображение загружается правильно, а затем, как только прокрутка даже немного, высота манипулируется таким образом, изображение полностью перемещается с экрана. Ниже приведен мой HTML, (немного уродливый в том, где размещены вкладки, но Джекилл собрал его вместе, включив заголовок 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 в верхней части и div класса bg, а затем 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;
}

3 52

html css twitter-bootstrap-3 webpage

3 ответа:

после проверки образца веб-сайта, который вы предоставили, я обнаружил, что автор может достичь эффекта с помощью библиотеки под названием Стеллар.js, взгляните на сайт библиотеки, ура!

6

Я думаю, что вы ищете, чтобы сохранить фоновое изображение фиксированным и просто перенести контент на свиток. Для этого вам нужно просто использовать следующее свойство css:

фоне привязанности: фиксированный;

0

Zim · Accepted Answer · 2014-01-04 14:02:58

Пример:http://bootply.com/103783

один из способов достичь этого-использовать 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/103783