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?

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

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).

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.

Leave a Reply

Your email address will not be published. Required fields are marked *