About
No patience to write up yet another sliding script to make your website more dynamic? Perhaps you have little development experience at all, and want a simpler way to utilize the same, eye-catching effect.
Done and done. With scrollipop, you can create an animated, scrolling website in mere seconds (yes, really), with minimal development knowledge.
Download
via npm :
npm install scrollipop
Or download the package files from Github.
Setup
Incorporate the js file into the page:
<script src="scrollipop.js"></script>
Usage
Add pages by adding divs. Any div placed as a child of body will create a fullscreen page.
<body>
<div><!−−Page 1−−></div>
<div><!−−Page 2−−></div>
<div><!−−Page 3−−></div>
</body>
Adding a Navigation
Navigation MUST be defined by the nav tag. You may utilize either the nav > ul > li or the nav > a format.
Create one link per number of pages. Name them whatever you want!
<body>
<div> <!−−Page 1 div−−>
<nav> <!−−Navigation−−>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<p>Hello World!</p> <!−−Other design elements on page 1−−>
</div>
The nav tag may also be placed as a child of body. The navigation MUST be either a child of body or a child of any page div.
<body>
<nav> <!−−Navigation−−>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</nav>
<div> <!−−Page 1 div−−>
<p>Hello World!</p> <!−−Other design elements on page−−>
</div>
Multiple <Nav> Elements
If multiple navigation menus exist and are children of either body or a page div, add the class name main_nav to whichever navigation instance(s) meant to iterate the site.
<body>
<div> <!−−Page 1 div−−>
<nav> <!−−This menu will NOT scroll through the site's pages.−−>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<nav class="main_nav"> <!−−This menu WILL scroll through the site's pages−−>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<p>Hello World!</p> <!−−Other design elements on page−−>
</div>
If multiple navigations exist, only navs with the class name main_nav will iterate the site. If none are identified with this class name, none will function.
Styling
<body>
<div>
<p>Hello World!</p>
<nav id="best_nav" class="main_nav inst1">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</div>
You may give any elements of your navigation an id or class name to style with CSS or JS as usual.
NOTE: This plugin reserves certain data attributes to function. Be careful when using them with HTML elements.
