Multiple Parrallax

Parrallax style in bootstrap

by Glynne Turner

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<section>
        <div class="parrallax bg1">
            <div class="parallax-inner text-center">
                <div class="container">
                  <div class="col">
                    <h1>Header Here</h1>
                    <h3>Sub Header Here</h3>
                  </div>                
                </div>
            </div>
            
         </div>
</section>

<section class="red padded50">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis minima fuga debitis quasi eius aliquid sapiente? Cumque blanditiis quibusdam, ex totam aliquam provident alias culpa, sit illo, eum doloribus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p><p> Excepturi reprehenderit voluptatum aperiam pariatur numquam praesentium recusandae, ipsa at iusto eveniet, distinctio sunt dolore nemo veniam maiores vitae deserunt cum ducimus.</p>
      </div>
      <div class="col-sm-6">
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis minima fuga debitis quasi eius aliquid sapiente? Cumque blanditiis quibusdam, ex totam aliquam provident alias culpa, sit illo</p> <p>um doloribus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi reprehenderit voluptatum aperiam pariatur numquam praesentium recusandae, ipsa at iusto eveniet, distinctio sunt dolore nemo veniam maiores vitae deserunt cum ducimus.</p> 
      </div>
    </div>
 ...

CSS

.red{background-color:#731700; color:white;}
.white-bg{background-color:#ffffff;}
*{box-sizing: border-box;}
p{font-size:24px; line-height:30px;}
.parrallax {height: 70vh; background-attachment: fixed;background-position:top;background-repeat: no-repeat; background-size: cover;
  }
.spacer{height:250px; width:100%}
.text-center{ text-align: center;}
.parallax-inner{display:flex; align-items:center;height:100vh}
.padded50{padding:50px 0;} 
.parrallax h1{color: #FFFFFF;  font-size: 122px; font-weight: 900; text-transform: uppercase; line-height: 1em;text-shadow: -3px 0px 10px #666666;}
.parrallax h3{color: #731700;    font-weight: 900; text-transform: uppercase; line-height: 1em;text-shadow: 0px 0px 1px #ffffff;}
.bg1{background-image: url("https://images.unsplash.com/photo-1581607961624-7fea2a53e21a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80");}
.bg2{background-image: url("https://images.unsplash.com/photo-1543790894-aca2ce9bc143?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80");}
.bg3{background-image: url("https://images.unsplash.com/photo-1579773480030-b343b70f6b47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1474&q=80");}
.bg4{background-image: url("https://images.unsplash.com/photo-1541919635-250e08fbdd21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80");}