GitHub release (opens new window) GitHub issues (opens new window) GitHub last commit (opens new window) Github file size (opens new window) Build Status (opens new window) npm (opens new window) npm (opens new window) Analytics (opens new window)

# IntroScroll

Create a fullscreen intro section and dismiss it in a single gesture.

# Description

This library creates a fullscreen intro section and disables the default page scroll.

The page scroll is being enabled again after a single mouse scroll, touch swipe up or any gesture that forces the page to move upwards.

# Install

npm i introscroll

or

yarn add introscroll

or

just download this repository and link the files located in dist folder

or include it from unpkg.com

<script src="https://unpkg.com/introscroll"></script>

Then

import IntroScroll from 'introscroll';

and initialize an instance using default settings

const intro = new IntroScroll();

or add your own settings

const intro = new IntroScroll({
  element: '#your-fullscreen-section',
  wrapper: '#your-fullscreen-sections-wrapper',
  container: '#your-fullscreen-sections-container',
  trigger: '#your-fullscreen-sections-link',
  scrollClass: 'intro--scrolled',
  duration: 1000,
  afterScroll(instance) {
    console.log(instance.element);
  }
});

For more details please see the demo (opens new window).

# Support this project

Tweet (opens new window) Donate (opens new window) Become a Patron (opens new window)

# LICENSE

MIT