Full-Page Scroll Effect On Touch | ScrollingMagic.js

ScrollingMagic.js is a comprehensive scrolling library for any device, which supports touch, wheel, and home key scroll that helps you implement an easy-to-touch single-page scrolling effect on single-page web applications such as landing pages.

touch enabled fullpage scrolling effect scrollingmagic js download, Touch-friendly Fullscreen Scrolling With jQuery, Interactive Scrolling Websites

How to make use of it:

1. Add scrolling blocks to the web page.

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

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 instance CSS types 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 each jQuery library and the ScrollingMagic.js into the doc.

<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 routinely disables touch gestures when the viewport size is smaller than 320px.

  (e) => {
    if (counter !== sections.length - 1) {
      if ((document.documentElement.clientWidth >= 320)) {
          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})
      {passive: false}
  } else {
    window.removeEventListener('touchmove', touchmove,)
    window.removeEventListener('touchstart', touchstart,)
    window.removeEventListener('touchend', touchend,)

Touch-enabled Fullpage Scrolling Effect, ScrollingMagic.js Plugin/Github

See Demo And Download

Official Website(AndriiMSN): Click Here

This superior jQuery/javascript plugin is developed by AndriiMSN. For extra advanced usage, please go to the official website.

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…