ScrollSpy Library

A lightweight ScrollSpy library for smooth scrolling animations using Intersection Observer API.

Installation

npm install sozo-scrollspy

Usage

<link rel="stylesheet" href="node_modules/sozo-scrollspy/dist/scrollspy.min.css">

<div sz-scrollspy="delay:500; cls:sz-animation-fade">
  <!-- Your content here -->
</div>

<script type="module">
import ScrollSpy from 'sozo-scrollspy';

ScrollSpy.init();
</script>

Demo

To see the ScrollSpy library in action, open the demo.html file in your web browser. This demo showcases various animation effects and scrollspy groups.

Options

hidden: (boolean) Whether to initially hide the element. Default: true
delay: (number) Delay in milliseconds before applying the animation. Default: 300
target: (string) CSS selector for target elements. Default: false (applies to container)
cls: (string) CSS class to apply for animation. Default: 'sz-animation-fade'
stagger: (boolean) Whether to stagger animations of child elements. Default: true
repeat: (boolean) Whether to repeat the animation when scrolling. Default: false

Available Animation Classes

sz-animation-fade
sz-animation-scale-up
sz-animation-scale-down
sz-animation-slide-top
sz-animation-slide-bottom
sz-animation-slide-left
sz-animation-slide-right
(and more... check the CSS file for all available classes)

License

MIT