Bootstrap Technique

Advertisements

Previous Page
Next Page  

Bootstrap is a popular framework with many ready-to-use components to choose from. Bootstrap can optimize the code for implementing parallax scrolling.

In this chapter, let us discuss with an example how we are going to use Jumbotron component to implement parallax scrolling.

Full Width Parallax Page with Bootstrap4 Jumbotron

Imagine a website where the user is shown with a big “call-to-action” box with some content regarding a discount or sale. Usually, Jumbotron finds its application in such places. It is a big box useful to attract attention of the user.

As we are using only one component of Bootstrap, we will not create a separate CSS file for this example. Let us dive right into the HTML code.

<!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>

Analysis of Code

The line 6 references Bootstrap 4 library. We are specifying the margin and border radius for jumbotron from line 8 to 11.

As we can see on line 33, we are creating a div with jumbotron class to show the big box where we will have our specific image loaded. Please note that there is no direct URL for the image this time, we are going to use a downloaded image. You can download any high resolution image for your example and specify it in line 16.

The output that you can see when you execute the above given code is shown below −

Jumbotron Example
Advertisements