Create Touch-enabled Fullscreen Scrolling Webpage – one-page-scroll

Category: Javascript | January 10, 2020
Author: huihuimoe
Views Total: 101
Official Page: Go to website
Last Update: January 10, 2020
License: MIT

Preview:

Create Touch-enabled Fullscreen Scrolling Webpage – one-page-scroll

Description:

A lightweight, mobile-compatible one page scroll plugin to scroll through pages via mouse wheel, keyboard arrows and touch events.

How to use it:

1. Download and import the one-page-scroll.

<!-- ES5 -->
<script src="./one-page-scroll.min.js"></script>
<!-- ES6 -->
<script type="module">
  import onePageScroll from './one-page-scroll.esm.js'
</script>

2. Insert fullscreen pages into the document.

<section id="s1" name="page1">
  Section 1
</section>

<section id="s2" name="page2">
  Section 2
</section>

<section id="s3" name="page2">
  Section 3
</section>

... more sections here ...

3. Initialize the one-page-scroll on the sections. Done.

var el = document.querySelectorAll('section');
var app = new onePageScroll({
    el: el
});

4. Determine whether to back to the first page when you scroll on the last one.

var app = new onePageScroll({ 
    loop: true
});

5. Config the duration of the animation. Default: 600ms.

var app = new onePageScroll({ 
    time: 1000
});

6. Apply an easing function to the animation.

var app = new onePageScroll({ 
    easing: 'ease-out'
});

7. Determine the the time you want to invoke user to scroll a page at most once.

var app = new onePageScroll({ 
    throttling: 300
});

8. Fire events when the page is inView and outView.

el.addEventListener('inview', function(e) {
  // do something
})

el.addEventListener('outview', function(e) {
  // do something
})

9. Scroll through the pages programmatically.

// next
app.next();

// prev
app.prev();

// go to a specified page
app.goto(n);

You Might Be Interested In:


2 thoughts on “Create Touch-enabled Fullscreen Scrolling Webpage – one-page-scroll

  1. Mdiab

    Firing events when the page is inView and outView isn’t working, any tips?

    Reply
    1. Mdiab

      Solved the issue and this is how:

      el is a collection of elements, so you need to iterate over them, add the event listener to each.

      Reply

Leave a Reply