Membuat Background Parallax Fixed pada Jumbotron

08/01/2018    Maykhel David    378     Website

Hallo teman-teman, pada artikel sebelumnya kita sudah membahas tentang cara membuat background parallax pada jumbotron, kali ini saya akan melanjutkan dengan memberikan sebuah variasi parallax pada jumbotron, yaitu dengan memberikan konten fixed pada jumbotron.

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 dimana nantinya konten dalam jumbotron tersebut akan tetap pada posisinya saat scroll dan hanya background saja yang bergerak dengan efek parallax. 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 affix">
  <h1>Bootstrap Jumbotron</h1>
  <p class="lead">+ Parallax Effect using jQuery</p>
</div>

<div class="container-fluid" id="main">
  <div class="row">
    <div class="col-md-12">
    <h2>Page Content</h2>
    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.
    <br>
    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.
  </div>
  </div>
  <hr>

</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;
  top:0;
}

#main {
  margin-top:350px;
  position:relative;
  background:#fff;
}

Selanjutnya kita membutuhkan fungsi javascrpt 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();
});

Dengan begitu kita sudah bisa melihat hasilnya ketika ditampilkan di browser, demikian artikel kali ini yang membahas tentang cara membuat background parallax pada jumbotron fixed, sampai jumpa pada artikel selanjutnya

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More