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.

8 Januari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat