เทคนิค Bootstrap
Bootstrap เป็นเฟรมเวิร์กยอดนิยมที่มีส่วนประกอบที่พร้อมใช้งานมากมายให้เลือกใช้ Bootstrap สามารถปรับโค้ดให้เหมาะสมสำหรับการใช้งานการเลื่อนพารัลแลกซ์
ในบทนี้ให้เราพูดคุยกับตัวอย่างว่าเราจะใช้ส่วนประกอบ Jumbotron เพื่อใช้การเลื่อนแบบพารัลแลกซ์อย่างไร
หน้า Parallax แบบเต็มความกว้างพร้อม Bootstrap4 Jumbotron
ลองนึกภาพเว็บไซต์ที่ผู้ใช้แสดงด้วยช่อง "คำกระตุ้นการตัดสินใจ" ขนาดใหญ่ที่มีเนื้อหาเกี่ยวกับส่วนลดหรือการขาย โดยปกติ Jumbotron จะพบการใช้งานในสถานที่ดังกล่าว เป็นกล่องขนาดใหญ่ที่มีประโยชน์ในการดึงดูดความสนใจของผู้ใช้
เนื่องจากเราใช้ส่วนประกอบเดียวของ Bootstrap เราจะไม่สร้างไฟล์ CSS แยกต่างหากสำหรับตัวอย่างนี้ ให้เราดำดิ่งลงไปในโค้ด 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>
การวิเคราะห์รหัส
line 6อ้างอิงไลบรารี Bootstrap 4 เรากำลังระบุระยะขอบและรัศมีขอบสำหรับ jumbotron จากline 8 to 11.
อย่างที่เราเห็นบน line 33เรากำลังสร้าง div ด้วยคลาส jumbotron เพื่อแสดงช่องขนาดใหญ่ที่เราจะโหลดอิมเมจเฉพาะของเรา โปรดทราบว่าไม่มี URL โดยตรงสำหรับรูปภาพในครั้งนี้เราจะใช้รูปภาพที่ดาวน์โหลดมา คุณสามารถดาวน์โหลดภาพความละเอียดสูงสำหรับตัวอย่างของคุณและระบุในรูปแบบline 16.
ผลลัพธ์ที่คุณสามารถเห็นได้เมื่อคุณรันโค้ดที่ระบุข้างต้นแสดงไว้ด้านล่าง -