Question

Just trying to learn how to implement a simple background image with parrallax. It works fine on desktop/laptop, but is very choppy and doesnt work properly on mobile devices. Using bootstrap-sass with rails.

Any obvious errors/tips that you can see?

CSS

.bg {
  background: url('home.jpg') no-repeat center center;
  position: fixed;
  width: 100%;
  height: 450px; /*same height as jumbotron */
  padding-top: 0;
  top:80px;
  left:0;
  z-index: -1;
}
#backPic {
  height: 450px;
  padding-top: 150px;
  color: white;
  text-shadow: #444 0 1px 1px;
  background:transparent;
  @media(min-width: $screen-lg-min) {
    text-align: left;
    margin-left: 0;
  }
}

JS

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

  $(window).scroll(function(e){
    parallax();
  });
</script>

HTML

<!DOCTYPE>
<head>
  <% content_for :title, "Golden Museum | Home" %>

</head>

<body>
<div class="bg"></div>
<div class="container vertical-center">
  <div class="row">
    <div class="col-xs-12 col-lg-8">
      <div class="container">

        <div id="backPic" class="jumbotron">
          <h1 class="text-center" id="homeTitle">Golden & District<br> Museum & Archives</h1>
          <h2 class="lead text-center">Preserving the records, pictures and artifacts of the Golden Area</h2>
        </div>

          <div id="mainCont" class="row">
            <div id="socialRow" class="row">
              <div class="container">
                <div class="col-xs-9 col-sm-3 col-lg-2">
                  <a href="https://www.facebook.com/pages/Golden-Museum-and-Archives/150197378373720?fref=ts" class="btn btn-block btn-default btn-facebook">
                    <i class="fa fa-facebook"></i> Visit on Facebook!
                  </a>
                </div>
              </div>
            </div>
            <div class="row">
              <div id="aboutJumbo" class="jumbotron">
                <%= render 'statics/text/home.text' %>
              </div>
            </div>
            <div id="blogRow" class="row">
              <div id="blogBox" class="container">
                <h2>Recent News</h2>
                <%= render 'blog' %>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

Background image parrallax choppy on mobile

0 个答案: