Membuat Website Parallax dengan Bootstrap 4 part 1

Membuat Website Parallax dengan Bootstrap 4 – Hallo semua, webite parallax adalah jenis website yang sempat popular pada dua tahun terakhir, website parallax sendiri adalah website dengan tipe full width, yang berarti tampilan website akan bersifat full dari kiri sampai ujung kanan. Sebelumnya saya juga pernah membuat sebuah artikel tentang website parallax yang berjudul membuat background parallax pada jumbotron

 Baiklah berikut adalah langkah membuat website parallax dengan bootstrap 4.

Pertama, kita mulai dengan basic template yang ada pada website resmi nya

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
Add Your Content Here...
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Selanjutnya kita buat css untuk memberikan tinggi minimum untuk setiap section yang ada dengan css seperti berikut

.paral {
min-height: 600px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}

Tambahkan juga css untuk memberi style sederhana pada isi konten yang ada dalam section, kalian bias sesuaikan sendiri dengan konten kalian

/* Paragraf Parallax Section */
.paral p {
font-size: 24px;
color:#f5f5f5;
text-align: center;
line-height: 60px;
}
 
/* Judul Parallax Section */
.paral h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 60px;
text-align: center;
padding-top: 60px;
line-height: 100px;
}

Selanjutnya kita tambahkan gambar pada setiap section yang kita miliki

/* Image for Parallax Section */
.paralsec {
background-image: url("https://img.webnots.com/2017/05/parallax.jpg");
}
 
.paralsec1 {
background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");}
 
.paralsec2 {
background-image: url("https://img.webnots.com/2015/11/parallax2.jpg");
}

/* kalian bias tambahkan sendiri jika lebih dari 3 section */

Sekarang kita hilangkan margin bottom pada jumbotron

/* Hilangkan margin bottom pada Jumbotron */
.jumbotron{margin-bottom: 0;}

Jika sudah selanjutnya kita akan coba buat layout parallax yang kita buat pada artikel selanjutnya, cukup mudah bukan klik pada judul dibawah untuk melihat artikel selanjutnya

Membuat Website Parallax dengan Bootstrap 4 Part 2