Touch-enabled Fullpage Scrolling Effect - ScrollingMagic.js

ScrollingMagic.js is a jQuery plugin that helps you quickly implement an accessible, touch-friendly, one page scrolling effect on single page web apps such as a landing page.

Users can navigate between scrolling blocks with mousewheel, arrow keys, and touch gestures.

How to use it:

1. Add scrolling blocks (content sections) to the page.

<sections class="scrolling-block">
  Section 1
</sections>
<sections class="scrolling-block">
  Section 2
</sections>
<sections class="scrolling-block">
  Section 3
</sections>
...

2. Hide the browser scrollbar.

html {
  width: 100%;
  scrollbar-width: none;
  /* Also needed to disable scrollbar Firefox */
  -ms-overflow-style: none;
  /* Disable scrollbar IE 10+ */
}

@-moz-document url-prefix() {
  /* Disable scrollbar Firefox */
  html {
      scrollbar-width: none;
  }
}

html::-webkit-scrollbar {
  /* Disable scrollbar Chrome/Safari/Webkit */
  width: 0px;
  background: transparent;
}

3. The example CSS styles for the scrolling blocks.

.scrolling-block {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  min-height: fit-content;
  height: 100vh;
  position: relative;
}

.scrolling-block img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrolling-block.invise {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.scrolling-block.active {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

4. Import both jQuery library and the ScrollingMagic.js into the document. That's it.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/scrollingMagic.js"></script>

5. Override the default delays in milliseconds.

let delayWheel = 400;
let delayTouch = 400;
let delayKey = 700;

6. By default, the plugin automatically disables touch gestures when the viewport size is smaller than 320px. You can override the breakpoint direcly in the JavaScript as follows:

window.addEventListener('scroll',
  (e) => {
    e.preventDefault()
    if (counter !== sections.length - 1) {
      if ((document.documentElement.clientWidth >= 320)) {
        window.scrollTo(0,
          sections[counter].offsetTop - (
          document.documentElement.clientHeight - (sections[counter].clientHeight)) / 2
        )

      }
    }
  })

function InitTouchScroll() {
  if (document.documentElement.clientWidth >= 320) {
    window.addEventListener('touchmove', touchmove,
      {passive: false})
    window.addEventListener('touchstart', touchstart, {passive: false})
    window.addEventListener(
      "touchend",
      touchend,
      {passive: false}
    );
  } else {
    window.removeEventListener('touchmove', touchmove,)
    window.removeEventListener('touchstart', touchstart,)
    window.removeEventListener('touchend', touchend,)
  }
}

---

This awesome jQuery plugin is developed by AndriiMSN. For more Advanced Usages, please check the demo page or visit the official website.