A Lightweight Full Page Scrolling With Pure JavaScript | PageScroll

PageScroll is a lightweight, full-page scrolling library. With Page Scroll, you can create beautiful landing pages with their own charm.

Full page scrolling library for JavaScript is very small and easy to use for creating one-page scrolling sites like presentations, page slides, landing pages, single-page apps, etc.

Must Read – Animated Page Scrolling To Specific ID Within Document With jQuery

How to make use of it:

1. Place the stylesheet pagescroll.css and JavaScript pagescroll.js within the HTML web page.

<link rel=”stylesheet” href=”pagescroll.css” />
<script src=”pagescroll.js”></script>

2. Add sectioned pages to a container component named 'pagescroll'.

<div id="pagescroll">
  <div class="section">Slide 1</div>
  <div class="section">Slide 2</div>
  <div class="section">Slide 3</div>
  <div class="section">Slide 4</div>
  <div class="section">Slide 5</div>
</div>

3. Initialize the PageScroll on doc ready.

new PageScroll('#pagescroll')

4. Customize the duration of the animation.

new PageScroll('#pagescroll', {
    animDuration: 500
})

5. Apply an easing function to the animation.

new PageScroll('#pagescroll', {
    easing: 'cubic-bezier(...)'
})

Must Read – Create One Page Multi Scrolling Split Websites | multiScroll.js

Customise

Options that available in this version:

OptionDescription
animDurationControls the duration of changing the scene. Default 300ms
easingControls the easing of animation. Default linear
controlColorSets the color of the control arrows at the right of the screen. Default #fff
navArray of selectors that represents each of the link. Usually used when you have links in navbar which are connected with seperate sections. Important to know that selectors in passed array should be in the same order as it goes in your navbar. No default values

Minimal Full Page Scrolling With Vanilla JavaScript, Page Scroll Plugin/Github

Read More – Simple One Page Scroll Navigation ES6 Vanilla.js Library | slide-nav

PageScroll DEMO


See Demo And Download

Official Website(beatmode-the-developer): Click Here

This superior jQuery/javascript plugin is developed by beatmode-the-developer. For extra Advanced Usages, please go to the official website.

Share