1.0.7 • Published 11 months ago
@bornfight/b-scroll-next v1.0.7
b-scroll-next [all b- libs]
Bornfight frontend micro lib for scrolling to next section
📦 Getting Started
Dependency: gsap
- install
b-scroll-nexttrough npm or pull ti from git
npm i @bornfight/b-scroll-next- include b-scroll-next to your JS after running npm install
🔨️ Usage
JS
import ScrollNext from "@bornfight/b-scroll-next";
new ScrollNext();HTML markup
<p class="js-scroll-next">
Go next
</p>Basic usage tips
- all elements with
.js-scroll-nextclass will trigger scroll
💎 Customization
import ScrollNext from "@bornfight/b-scroll-next";
new ScrollNext({
element: ".js-links",
ease: "expo.inOut",
duration: 5,
offset: 200
});✅ Properties
| Option | Type | Default | Example | Description |
|---|---|---|---|---|
| element | string | ".js-scroll-next" | ".js-my-scroll-element" | Elements that will be used as "scroll next" triggers |
| offset | number | 0 | 200 | number type value - scroll will be offset by that amount in pixels |
| ease | string | "power3.inOut" | "expo.out" | Scroll ease can be modified (gsap eases) |
| duration | number | 0.5 | 10 | Duration of the scroll in seconds |
🚀 Useful to know
- offset will reflect to every element inside that instance
without any option it will scroll just below clicked element
📦 Contribute
Gulp based system
- Gulp 4 used
browsersync for live reload
npm run dev - dev environent with browsersyncLicense
MIT © Bornfight