Scroll Effect

Smooth on scroll animation effect.

How to use?

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

                
                  <script src=".././assets/js/components/hs.scroll-effect.js"></script>
                
              

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                
                  <script>
                    $(document).on('ready', function () {
                      // initialization of scroll effect component
                      $.HSCore.components.HSScrollEffect.init('.js-scroll-effect');
                    });
                  </script>
                
              

Basic example

Wrap the block you want to animate on scroll within an element that declares position: relative;, add the JS class and scroll-effect="smoothFadeToBottom" attribute.

Scroll effect tile

Scroll effect text.

Read More
                      
                        <div class="bg-img-hero space-3" style="background-image: url(../assets/img/img40.jpg);">
                          <div class="container">
                            <article class="js-scroll-effect position-relative text-center"
                                     data-scroll-effect="smoothFadeToBottom"
                                     data-scroll-effect-speed="300">
                              <div class="mb-4">
                                <h2 class="text-white font-weight-semi-bold mb-3"
                                    data-scs-animation-in="fadeInUp">Scroll effect tile</h2>
                                <p class="text-white-70 mb-7"
                                   data-scs-animation-in="fadeInUp">Scroll effect text.</p>
                              </div>
                              <a class="btn text-primary btn-white btn-pill btn-wide transition-3d-hover" href="#"
                                 data-scs-animation-in="fadeInUp">Read More</a>
                            </article>
                          </div>
                        </div>
                      
                    

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-scroll-effect="".

Attribute Description

data-scroll-effect

Scroll effect. Only smoothFadeToBottom scroll effect is available at this moment.

data-scroll-effect-speed

Fade out animation speed when content is scrolled.
Contact Us