Parallax scrolling hero with Boostrap4 and just a few lines of code.

Imagine the following plain bootstrap4 HTML snippet. Wouldn’t it be great if we could turn this into a fancy scrolling parallax hero with fading text using less than 15 lines of css and js and NO extra requirements?

&lt;section id="hero" class="hero"&gt;
   &lt;div class="d-flex justify-content-center text-center h-100"&gt;
   &lt;article class="col-sm-6 text-white hero-content align-self-center"&gt;
        &lt;h1&gt;Header&lt;/h1&gt;
        &lt;p class="lead"&gt;Content&lt;/p&gt;
        &lt;div class="btn btn-primary"&gt;Press&lt;/div&gt;
    &lt;/article&gt;
    &lt;/div&gt;
&lt;/section&gt;

<h1>Header</h1>

<p class="lead">Content</p>

<div class="btn btn-primary">Press</div>

</article>

</div>

</section>

Below the css/main.css file (6 lines including css semantics)

.hero {
    background: url("http://lorempixel.com/1440/900") center;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
}

.hero {

background: url("http://lorempixel.com/1440/900") center;

background-size: cover;

height: 100vh;

overflow: hidden;

}

And the Javascript js/script.js. Without this step, you would be stuck with a normal hero instead of the neat parallanimated one (8 lines js + 6 lines css, makes 14 lines).

$(document).ready(function(){
    $(window).scroll(function(e){
      var scrolled = $(window).scrollTop();
      var pct = 50 - (scrolled*0.15) + '%';
      $('.hero').css('background-position','50% ' + pct);
      $('.hero-content').css({'margin-top':(scrolled*0.06) +'rem','opacity':1-(scrolled*.001) });
    });
  })

$(document).ready(function(){

$(window).scroll(function(e){

var scrolled = $(window).scrollTop();

var pct = 50 - (scrolled*0.15) + '%';

$('.hero').css('background-position','50% ' + pct);

$('.hero-content').css({'margin-top':(scrolled*0.06) +'rem','opacity':1-(scrolled*.001) });

});

})

That’s it. Below the Bootstrap 4 demo page. Parallax needs something to scroll, so that’s why we need some extra Lorem Ipsum paragraphs. Besides that it’s just bootsrap4 together with minimal html.

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;

    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="css/main.css"&gt;

    &lt;/head&gt;
    &lt;body&gt;
        
        &lt;header&gt;
            &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
                &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
                &lt;ul class="navbar-nav mr-auto"&gt;
                    &lt;li class="nav-item active"&gt;
                        &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                        &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                        &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;
        &lt;/header&gt;

        &lt;section id="hero" class="hero"&gt;
            &lt;div class="d-flex justify-content-center text-center h-100"&gt;
                &lt;article class="col-sm-6 text-white hero-content align-self-center"&gt;
                    &lt;h1&gt;Header&lt;/h1&gt;
                    &lt;p class="lead"&gt;Content&lt;/p&gt;
                    &lt;div class="btn btn-primary"&gt;Press&lt;/div&gt;
                &lt;/article&gt;
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;section class="container"&gt;
                &lt;p&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu consectetur orci. Donec venenatis pulvinar neque,
                    vulputate luctus ante. Vivamus et ullamcorper sapien. In quis pellentesque lacus. Mauris lacinia pulvinar justo. Sed
                    suscipit nibh vel velit sodales, in consequat odio sagittis. Sed id ultricies justo, vel facilisis sem. Pellentesque
                    ut enim a neque laoreet mattis ac sed turpis. Donec vestibulum est sit amet lacus tincidunt pellentesque. Sed non
                    scelerisque nulla, nec blandit libero. Morbi commodo nibh et orci tempus, quis mollis turpis vehicula. Cras vel
                    semper nibh. Praesent sodales leo tellus, non semper enim pretium et. Maecenas consectetur enim suscipit risus
                    varius, quis consequat quam scelerisque. Suspendisse facilisis sem semper neque malesuada aliquet. Phasellus auctor
                    malesuada molestie.
                &lt;/p&gt;
                &lt;p&gt;
                    Sed sodales elementum est aliquam congue. Vivamus fringilla venenatis urna, vitae volutpat nibh interdum et. Donec
                    fermentum lorem sed metus vulputate suscipit. Nulla viverra, tellus sed condimentum congue, dui arcu blandit enim,
                    eget porttitor dolor eros vitae purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
                    turpis egestas. Sed bibendum ipsum in nibh pellentesque tempor. Vivamus consequat risus at lacinia consectetur. Orci
                    varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc faucibus tellus volutpat
                    convallis lobortis.
                &lt;/p&gt;
                &lt;p&gt;
                    Nunc a magna arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacus erat. Proin vel
                    orci vel metus iaculis pretium vitae id metus. Morbi eu sem dolor. Aenean consectetur ut libero vitae tempor. Nam ut
                    elit tincidunt, vehicula dui ac, auctor turpis. Donec accumsan orci vel pharetra efficitur. Sed volutpat luctus
                    ligula et pulvinar. Maecenas ullamcorper hendrerit nisi, id efficitur ipsum volutpat egestas. Cras malesuada velit
                    id elit bibendum hendrerit. Sed quis nunc ipsum. Ut in eros laoreet, feugiat ligula et, fringilla purus. Mauris sed
                    nisl nisl.
                &lt;/p&gt;
                &lt;p&gt;
                    Cras lacinia commodo nibh convallis commodo. Maecenas quis tincidunt purus. In consequat scelerisque nisl at
                    ultricies. Vivamus pellentesque rutrum ex, et placerat enim bibendum vitae. Praesent ac nulla id nulla malesuada
                    condimentum sit amet vel nulla. Vestibulum nec cursus mi. Nunc pretium nibh non purus eleifend vestibulum. Nullam
                    tincidunt faucibus hendrerit. Integer euismod purus eget condimentum fringilla. Vivamus a dolor pulvinar, rutrum
                    eros ac, feugiat libero. Integer nec elit id lorem ullamcorper condimentum sit amet eu enim. Ut at finibus neque.
                    Sed gravida risus erat, non pulvinar lacus posuere sit amet. Ut non felis vel libero commodo mollis et ut sapien.
                    Sed elementum fringilla elit, nec blandit nibh pharetra ut. Praesent eu cursus urna.
                &lt;/p&gt;
                &lt;p&gt;
                    Nunc imperdiet libero nec elit lacinia, sed sodales erat faucibus. Aenean mollis vestibulum neque, ut sollicitudin
                    metus luctus laoreet. Nulla semper dictum ante, vitae fermentum augue interdum et. Mauris rutrum quis orci eget
                    lobortis. Integer suscipit blandit tempor. Mauris pretium purus nec aliquam vulputate. Quisque sollicitudin vehicula
                    pretium. Cras porta nibh elit, rutrum pretium lorem ornare at. Donec suscipit mi est, non blandit eros porttitor
                    ultricies.
                &lt;/p&gt;
                &lt;p&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu consectetur orci. Donec venenatis pulvinar neque,
                    vulputate luctus ante. Vivamus et ullamcorper sapien. In quis pellentesque lacus. Mauris lacinia pulvinar justo. Sed
                    suscipit nibh vel velit sodales, in consequat odio sagittis. Sed id ultricies justo, vel facilisis sem. Pellentesque
                    ut enim a neque laoreet mattis ac sed turpis. Donec vestibulum est sit amet lacus tincidunt pellentesque. Sed non
                    scelerisque nulla, nec blandit libero. Morbi commodo nibh et orci tempus, quis mollis turpis vehicula. Cras vel
                    semper nibh. Praesent sodales leo tellus, non semper enim pretium et. Maecenas consectetur enim suscipit risus
                    varius, quis consequat quam scelerisque. Suspendisse facilisis sem semper neque malesuada aliquet. Phasellus auctor
                    malesuada molestie.
                &lt;/p&gt;
                &lt;p&gt;
                    Sed sodales elementum est aliquam congue. Vivamus fringilla venenatis urna, vitae volutpat nibh interdum et. Donec
                    fermentum lorem sed metus vulputate suscipit. Nulla viverra, tellus sed condimentum congue, dui arcu blandit enim,
                    eget porttitor dolor eros vitae purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
                    turpis egestas. Sed bibendum ipsum in nibh pellentesque tempor. Vivamus consequat risus at lacinia consectetur. Orci
                    varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc faucibus tellus volutpat
                    convallis lobortis.
                &lt;/p&gt;
                &lt;p&gt;
                    Nunc a magna arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacus erat. Proin vel
                    orci vel metus iaculis pretium vitae id metus. Morbi eu sem dolor. Aenean consectetur ut libero vitae tempor. Nam ut
                    elit tincidunt, vehicula dui ac, auctor turpis. Donec accumsan orci vel pharetra efficitur. Sed volutpat luctus
                    ligula et pulvinar. Maecenas ullamcorper hendrerit nisi, id efficitur ipsum volutpat egestas. Cras malesuada velit
                    id elit bibendum hendrerit. Sed quis nunc ipsum. Ut in eros laoreet, feugiat ligula et, fringilla purus. Mauris sed
                    nisl nisl.
                &lt;/p&gt;
                &lt;p&gt;
                    Cras lacinia commodo nibh convallis commodo. Maecenas quis tincidunt purus. In consequat scelerisque nisl at
                    ultricies. Vivamus pellentesque rutrum ex, et placerat enim bibendum vitae. Praesent ac nulla id nulla malesuada
                    condimentum sit amet vel nulla. Vestibulum nec cursus mi. Nunc pretium nibh non purus eleifend vestibulum. Nullam
                    tincidunt faucibus hendrerit. Integer euismod purus eget condimentum fringilla. Vivamus a dolor pulvinar, rutrum
                    eros ac, feugiat libero. Integer nec elit id lorem ullamcorper condimentum sit amet eu enim. Ut at finibus neque.
                    Sed gravida risus erat, non pulvinar lacus posuere sit amet. Ut non felis vel libero commodo mollis et ut sapien.
                    Sed elementum fringilla elit, nec blandit nibh pharetra ut. Praesent eu cursus urna.
                &lt;/p&gt;
                &lt;p&gt;
                    Nunc imperdiet libero nec elit lacinia, sed sodales erat faucibus. Aenean mollis vestibulum neque, ut sollicitudin
                    metus luctus laoreet. Nulla semper dictum ante, vitae fermentum augue interdum et. Mauris rutrum quis orci eget
                    lobortis. Integer suscipit blandit tempor. Mauris pretium purus nec aliquam vulputate. Quisque sollicitudin vehicula
                    pretium. Cras porta nibh elit, rutrum pretium lorem ornare at. Donec suscipit mi est, non blandit eros porttitor
                    ultricies.
                &lt;/p&gt;
        &lt;/section&gt;

    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

<!doctype html>

<head>

</head>

<body>

<a class="navbar-brand" href="#">Navbar</a>

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

</header>

<h1>Header</h1>

<p class="lead">Content</p>

<div class="btn btn-primary">Press</div>

</article>

</div>

</section>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu consectetur orci. Donec venenatis pulvinar neque,

vulputate luctus ante. Vivamus et ullamcorper sapien. In quis pellentesque lacus. Mauris lacinia pulvinar justo. Sed

suscipit nibh vel velit sodales, in consequat odio sagittis. Sed id ultricies justo, vel facilisis sem. Pellentesque

ut enim a neque laoreet mattis ac sed turpis. Donec vestibulum est sit amet lacus tincidunt pellentesque. Sed non

scelerisque nulla, nec blandit libero. Morbi commodo nibh et orci tempus, quis mollis turpis vehicula. Cras vel

semper nibh. Praesent sodales leo tellus, non semper enim pretium et. Maecenas consectetur enim suscipit risus

varius, quis consequat quam scelerisque. Suspendisse facilisis sem semper neque malesuada aliquet. Phasellus auctor

malesuada molestie.

</p>

<p>

Sed sodales elementum est aliquam congue. Vivamus fringilla venenatis urna, vitae volutpat nibh interdum et. Donec

fermentum lorem sed metus vulputate suscipit. Nulla viverra, tellus sed condimentum congue, dui arcu blandit enim,

eget porttitor dolor eros vitae purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac

turpis egestas. Sed bibendum ipsum in nibh pellentesque tempor. Vivamus consequat risus at lacinia consectetur. Orci

varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc faucibus tellus volutpat

convallis lobortis.

</p>

<p>

Nunc a magna arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacus erat. Proin vel

orci vel metus iaculis pretium vitae id metus. Morbi eu sem dolor. Aenean consectetur ut libero vitae tempor. Nam ut

elit tincidunt, vehicula dui ac, auctor turpis. Donec accumsan orci vel pharetra efficitur. Sed volutpat luctus

ligula et pulvinar. Maecenas ullamcorper hendrerit nisi, id efficitur ipsum volutpat egestas. Cras malesuada velit

id elit bibendum hendrerit. Sed quis nunc ipsum. Ut in eros laoreet, feugiat ligula et, fringilla purus. Mauris sed

nisl nisl.

</p>

<p>

Cras lacinia commodo nibh convallis commodo. Maecenas quis tincidunt purus. In consequat scelerisque nisl at

ultricies. Vivamus pellentesque rutrum ex, et placerat enim bibendum vitae. Praesent ac nulla id nulla malesuada

condimentum sit amet vel nulla. Vestibulum nec cursus mi. Nunc pretium nibh non purus eleifend vestibulum. Nullam

tincidunt faucibus hendrerit. Integer euismod purus eget condimentum fringilla. Vivamus a dolor pulvinar, rutrum

eros ac, feugiat libero. Integer nec elit id lorem ullamcorper condimentum sit amet eu enim. Ut at finibus neque.

Sed gravida risus erat, non pulvinar lacus posuere sit amet. Ut non felis vel libero commodo mollis et ut sapien.

Sed elementum fringilla elit, nec blandit nibh pharetra ut. Praesent eu cursus urna.

</p>

<p>

Nunc imperdiet libero nec elit lacinia, sed sodales erat faucibus. Aenean mollis vestibulum neque, ut sollicitudin

metus luctus laoreet. Nulla semper dictum ante, vitae fermentum augue interdum et. Mauris rutrum quis orci eget

lobortis. Integer suscipit blandit tempor. Mauris pretium purus nec aliquam vulputate. Quisque sollicitudin vehicula

pretium. Cras porta nibh elit, rutrum pretium lorem ornare at. Donec suscipit mi est, non blandit eros porttitor

ultricies.

</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu consectetur orci. Donec venenatis pulvinar neque,

vulputate luctus ante. Vivamus et ullamcorper sapien. In quis pellentesque lacus. Mauris lacinia pulvinar justo. Sed

suscipit nibh vel velit sodales, in consequat odio sagittis. Sed id ultricies justo, vel facilisis sem. Pellentesque

ut enim a neque laoreet mattis ac sed turpis. Donec vestibulum est sit amet lacus tincidunt pellentesque. Sed non

scelerisque nulla, nec blandit libero. Morbi commodo nibh et orci tempus, quis mollis turpis vehicula. Cras vel

semper nibh. Praesent sodales leo tellus, non semper enim pretium et. Maecenas consectetur enim suscipit risus

varius, quis consequat quam scelerisque. Suspendisse facilisis sem semper neque malesuada aliquet. Phasellus auctor

malesuada molestie.

</p>

<p>

Sed sodales elementum est aliquam congue. Vivamus fringilla venenatis urna, vitae volutpat nibh interdum et. Donec

fermentum lorem sed metus vulputate suscipit. Nulla viverra, tellus sed condimentum congue, dui arcu blandit enim,

eget porttitor dolor eros vitae purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac

turpis egestas. Sed bibendum ipsum in nibh pellentesque tempor. Vivamus consequat risus at lacinia consectetur. Orci

varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc faucibus tellus volutpat

convallis lobortis.

</p>

<p>

Nunc a magna arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacus erat. Proin vel

orci vel metus iaculis pretium vitae id metus. Morbi eu sem dolor. Aenean consectetur ut libero vitae tempor. Nam ut

elit tincidunt, vehicula dui ac, auctor turpis. Donec accumsan orci vel pharetra efficitur. Sed volutpat luctus

ligula et pulvinar. Maecenas ullamcorper hendrerit nisi, id efficitur ipsum volutpat egestas. Cras malesuada velit

id elit bibendum hendrerit. Sed quis nunc ipsum. Ut in eros laoreet, feugiat ligula et, fringilla purus. Mauris sed

nisl nisl.

</p>

<p>

Cras lacinia commodo nibh convallis commodo. Maecenas quis tincidunt purus. In consequat scelerisque nisl at

ultricies. Vivamus pellentesque rutrum ex, et placerat enim bibendum vitae. Praesent ac nulla id nulla malesuada

condimentum sit amet vel nulla. Vestibulum nec cursus mi. Nunc pretium nibh non purus eleifend vestibulum. Nullam

tincidunt faucibus hendrerit. Integer euismod purus eget condimentum fringilla. Vivamus a dolor pulvinar, rutrum

eros ac, feugiat libero. Integer nec elit id lorem ullamcorper condimentum sit amet eu enim. Ut at finibus neque.

Sed gravida risus erat, non pulvinar lacus posuere sit amet. Ut non felis vel libero commodo mollis et ut sapien.

Sed elementum fringilla elit, nec blandit nibh pharetra ut. Praesent eu cursus urna.

</p>

<p>

Nunc imperdiet libero nec elit lacinia, sed sodales erat faucibus. Aenean mollis vestibulum neque, ut sollicitudin

metus luctus laoreet. Nulla semper dictum ante, vitae fermentum augue interdum et. Mauris rutrum quis orci eget

lobortis. Integer suscipit blandit tempor. Mauris pretium purus nec aliquam vulputate. Quisque sollicitudin vehicula

pretium. Cras porta nibh elit, rutrum pretium lorem ornare at. Donec suscipit mi est, non blandit eros porttitor

ultricies.

</p>

</section>

</body>

</html>

Leave a Reply Cancel reply