Bootstrap Tekniği
Bootstrap, aralarından seçim yapabileceğiniz birçok kullanıma hazır bileşen içeren popüler bir çerçevedir. Bootstrap, paralaks kaydırmayı uygulamak için kodu optimize edebilir.
Bu bölümde, paralaks kaydırmayı uygulamak için Jumbotron bileşenini nasıl kullanacağımızı bir örnekle tartışalım.
Bootstrap4 Jumbotron ile Tam Genişlikte Paralaks Sayfası
Kullanıcıya, indirim veya satışla ilgili bazı içeriğin bulunduğu büyük bir "harekete geçirici mesaj" kutusunun gösterildiği bir web sitesi hayal edin. Genellikle Jumbotron uygulamasını bu tür yerlerde bulur. Kullanıcının dikkatini çekmeye yarayan büyük bir kutudur.
Bootstrap'in yalnızca bir bileşenini kullandığımız için, bu örnek için ayrı bir CSS dosyası oluşturmayacağız. Doğrudan HTML koduna girelim.
<!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>Kod Analizi
line 6referanslar Bootstrap 4 kitaplığı. Jumbotron için kenar boşluğunu ve yarıçapını belirliyoruz.line 8 to 11.
Görebildiğimiz gibi line 33, özel imajımızın yükleneceği büyük kutuyu göstermek için jumbotron sınıfıyla bir div oluşturuyoruz. Lütfen bu sefer görsel için doğrudan bir URL olmadığını unutmayın, indirilmiş bir görsel kullanacağız. Örneğiniz için herhangi bir yüksek çözünürlüklü resmi indirebilir veline 16.
Yukarıda verilen kodu çalıştırdığınızda görebileceğiniz çıktı aşağıda gösterilmiştir -
