Teknik Bootstrap
Bootstrap adalah kerangka kerja populer dengan banyak komponen siap pakai untuk dipilih. Bootstrap dapat mengoptimalkan kode untuk mengimplementasikan parallax scrolling.
Pada bab ini, mari kita bahas dengan contoh bagaimana kita akan menggunakan komponen Jumbotron untuk mengimplementasikan parallax scrolling.
Halaman Parallax Lebar Penuh dengan Bootstrap4 Jumbotron
Bayangkan sebuah situs web di mana pengguna ditampilkan dengan kotak "ajakan bertindak" yang besar dengan beberapa konten tentang diskon atau penjualan. Biasanya, Jumbotron menemukan penerapannya di tempat-tempat seperti itu. Ini adalah kotak besar yang berguna untuk menarik perhatian pengguna.
Karena kami hanya menggunakan satu komponen Bootstrap, kami tidak akan membuat file CSS terpisah untuk contoh ini. Mari kita selami langsung ke kode HTML.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Analisis Kode
Itu line 6referensi pustaka Bootstrap 4. Kami menentukan margin dan radius perbatasan untuk jumbotron dariline 8 to 11.
Seperti yang bisa kita lihat line 33, kami membuat div dengan kelas jumbotron untuk menunjukkan kotak besar tempat gambar spesifik kami akan dimuat. Harap dicatat bahwa tidak ada URL langsung untuk gambar kali ini, kami akan menggunakan gambar yang diunduh. Anda dapat mengunduh gambar resolusi tinggi untuk contoh Anda dan menentukannya diline 16.
Output yang dapat Anda lihat ketika Anda menjalankan kode yang diberikan di atas ditunjukkan di bawah ini -
