Scroll Effect

Smooth on scroll animation effect.

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>

About

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.

For more example, see, Blog business.

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.