Membuat Background Parallax pada Jumbotron

Hallo semuanya, banyak sekali cara unik untuk memberikan sentuhan artistic pada sebuah website. Bootstrap sebagai salah satu framework responsive yang tersusun dari kode HTML, CSS dan Javascript telah dibuat sedemikian rupa untuk menyesuaikan dengan trend tema dan gaya website terbaru, seperti contohnya website dengan background parallax.

Pada artikel kali ini kita akan membahas tentang cara membuat background parallax pada elemen bootstrap yaitu jumbotron. Jumbotron sendiri adalah elemen bootstrap yang memiliki ciri khas dengan konten serba besar yang biasa dipakai untuk sebuah judul.

Berikut adalah struktur yang kita perlukan untuk membuat parallax jumbotron

<div class="bg"></div>
<div class="jumbotron">
  <h1>Bootstrap Jumbotron</h1>
  <p class="lead">+ Parallax Effect using jQuery</p>
</div>

<div class="container">
  <div class="row">
    <h2>Page Content</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
    Aliquam in felis sit amet augue.</p>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
    Aliquam in felis sit amet augue.</p>
    
</div>

<hr>

<div class="container">
    <div class="row">
      <div class="col-md-12 text-center"><p>DUMET School.</p></div>
    </div>
</div>

Sekarang kita akan berikan css yang diperlukan

.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 {
  height: 350px;
  color: white;
  text-shadow: #444 0 1px 1px;
  background:transparent;
}

Selanjutnya kita membutuhkan fungsi javascript untuk mengaktifkan background parallax tersebut

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

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

Baiklah teman teman demikian artikel kali ini yang membahas tentang cara membuat background paralax pada jumbotron, Semoga bermanfaat.