https://github.com/scriptex/introscroll

Fullwidth and Fullheight intro section
https://github.com/scriptex/introscroll

page-scroll single-scroll swipe-to-scroll

Last synced: 10 months ago
JSON representation

Fullwidth and Fullheight intro section

• Host: GitHub
• URL: https://github.com/scriptex/introscroll
• Owner: scriptex
• License: mit
• Created: 2017-01-31T20:22:13.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2025-03-05T06:19:47.000Z (11 months ago)
• Last Synced: 2025-03-18T04:42:45.525Z (10 months ago)
• Topics: page-scroll, single-scroll, swipe-to-scroll
• Language: JavaScript
• Homepage: https://intro-scroll.atanas.info/
• Size: 1.4 MB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Travis CI](https://travis-ci.com/scriptex/IntroScroll.svg?branch=master)](https://travis-ci.com/scriptex/IntroScroll)

[![Github Build](https://github.com/scriptex/IntroScroll/workflows/Build/badge.svg)](https://github.com/scriptex/IntroScroll/actions?query=workflow%3ABuild)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/IntroScroll/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/IntroScroll&utm_campaign=Badge_Grade)

[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-IntroScroll-master)

[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/IntroScroll/badge)](https://www.codefactor.io/repository/github/scriptex/IntroScroll)

[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)

[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/IntroScroll/README.md?pixel)](https://github.com/scriptex/IntroScroll/)

# IntroScroll

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

See the demo [here](https://intro-scroll.atanas.info/)

## Visitor stats

![GitHub stars](https://img.shields.io/github/stars/scriptex/IntroScroll?style=social)

![GitHub forks](https://img.shields.io/github/forks/scriptex/IntroScroll?style=social)

![GitHub watchers](https://img.shields.io/github/watchers/scriptex/IntroScroll?style=social)

![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)

## Code stats

![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/IntroScroll)

![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/IntroScroll?style=plastic)

![GitHub language count](https://img.shields.io/github/languages/count/scriptex/IntroScroll?style=plastic)

![GitHub top language](https://img.shields.io/github/languages/top/scriptex/IntroScroll?style=plastic)

![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/IntroScroll?style=plastic)

## 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

```sh

npm i introscroll

```

or

```sh

yarn add introscroll

```

or

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

or include it from unpkg.com

```html

```

Then

```javascript

import IntroScroll from 'introscroll';

```

and initialize an instance using default settings

```javascript

const intro = new IntroScroll();

```

or add your own settings

```javascript

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](https://github.com/scriptex/IntroScroll/blob/master/demo/index.html).

## LICENSE

MIT

---



    Connect with me:








    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    

     

    

        

    



---



Support and sponsor my work: