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.
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 |
---|---|
|
Scroll effect. Only smoothFadeToBottom scroll effect is available at this moment. |
|
Fade out animation speed when content is scrolled. |