Parallax

Turn your content into a beautiful and smooth parallax effect.

Official documentation

For more detailed information and examples, see the official documentation: Dzsparallaxer documentation .

How to use?

Copy-paste the stylesheet <link> into your <head> to load the CSS.

                  
                    <link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                  
                    <script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>

Basic example

Parallax

Presented by the Front's most generous community of creatives.

                        
                          <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll" data-options='{direction: "normal"}'>
                            <!-- Apply your Parallax background image here -->
                            <div class="divimage dzsparallaxer--target" style="height: 130%; background-image: url(../../assets/img/1920x800/img5.jpg);"></div>

                            <div class="container space-3">
                              <div class="text-center w-lg-80 mx-auto">
                                <h1 class="text-white display-1 font-weight-bold">Parallax</h1>
                              </div>

                              <div class="text-center w-lg-40 mx-auto">
                                <p class="lead text-white-70">Presented by the Front's most generous community of creatives.</p>
                              </div>
                            </div>
                          </div>

SCSS

SCSS-files of the component can be found here ../../assets/scss/front/vendor/dzsparallaxer/

Contact Us