Minimal Full Page Scrolling With Vanilla JavaScript – PageScroll

Category: Animation , Javascript | October 18, 2020
Author:beatmode-the-developer
Views Total:61 views
Official Page:Go to website
Last Update:October 18, 2020
License:MIT

Preview:

Minimal Full Page Scrolling With Vanilla JavaScript – PageScroll

Description:

A super tiny and simple-to-use JavaScript full page scroll library for creating one-page scrolling websites like presentations, page sliders, landing pages, single-page apps, etc.

Features:

  • Slide between sections with mouse wheel.
  • Navigate to prev or next section by pressing the navigation arrows.

How to use it:

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

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

2. Add sectioned pages to a container element 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 document ready. That’s it.

new PageScroll('#pagescroll')

4. Customize the duration of the animation. Defaults to 300ms.

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

5. Apply an easing function to the animation. Defaults to ‘linear’.

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

6. Specify the background color of the up/down arrows.

new PageScroll('#pagescroll', {
    controlColor: '#ccc'
})

7. Define an array of selectors that allows the user to switch between sections by clicking anchor links. Great for header navigation.

new PageScroll('#pagescroll', {
    nav: [
      document.getElementById('home'),
      document.getElementById('about'),
      document.getElementById('contact'),
      document.getElementById('blog'),
      document.getElementById('jobs')
    ]
})

Changelog:

v1.1 (10/19/2020)

  • added nav support

You Might Be Interested In:


Leave a Reply