npm.io
1.2.5 • Published 2 years ago

single-page-scrolling-navigation

Licence
ISC
Version
1.2.5
Deps
0
Size
8 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

CMO Single page scrolling navigation

Small library to handle scroll navigation on one page websites

Install

npm install single-page-scrolling-navigation
import { singlePageNavigation } from "single-page-scrolling-navigation";
Setting
ReactJS:
useEffect(() => {
  singlePageNavigation({
    selector: ".nav",
    childSelector: ".nav li a",
    time: 2000,
    easing: "easeInOutQuad",
    cb: () => console.log("animation finished"),
  });
}, []);
<nav className="nav">
  <ul>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#services">Services</a>
    </li>
    <li>
      <a href="#work">Work</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>
HTML and VanillaJs:
cmoHashNavigation({
  selector: ".nav",
  childSelector: ".nav li a",
  time: 2000,
  easing: "easeInOutQuad",
  cb: () => console.log("animation finished"),
});
<nav class="nav">
  <ul>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#services">Services</a>
    </li>
    <li>
      <a href="#work">Work</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>
Options
Option Type Default Description
selector string null the selector, it could be a class, id, or tagname
childSelector string null the child selector, it could be a class, id, or tagname
time integer null the animation duration
cb function null callback to execute when animation finish
easing string null could be one of these easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, aseInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint.

Keywords

reactlanding pagescrolling navigation