Membuat Background Parallax Fixed pada Jumbotron

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

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat