IntroScroll

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

See the demo here

Visitor stats

Code stats

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.

LICENSE

MIT

---

<div align="center"> Connect with me: </div> <br /> <div align="center"> <a href="https://atanas.info"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg" height="20" alt=""> </a> &nbsp; <a href="mailto:hi@atanas.info"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg" height="20" alt=""> </a> &nbsp; <a href="https://www.linkedin.com/in/scriptex/"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg" height="20" alt=""> </a> &nbsp; <a href="https://github.com/scriptex"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg" height="20" alt=""> </a> &nbsp; <a href="https://gitlab.com/scriptex"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg" height="20" alt=""> </a> &nbsp; <a href="https://twitter.com/scriptexbg"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg" height="20" alt=""> </a> &nbsp; <a href="https://www.npmjs.com/~scriptex"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg" height="20" alt=""> </a> &nbsp; <a href="https://www.youtube.com/user/scriptex"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg" height="20" alt=""> </a> &nbsp; <a href="https://stackoverflow.com/users/4140082/atanas-atanasov"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg" height="20" alt=""> </a> &nbsp; <a href="https://codepen.io/scriptex/"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg" width="20" alt=""> </a> &nbsp; <a href="https://profile.codersrank.io/user/scriptex"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg" height="20" alt=""> </a> &nbsp; <a href="https://linktr.ee/scriptex"> <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg" height="20" alt=""> </a> </div>

---

<div align="center"> Support and sponsor my work: <br /> <br /> <a href="https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A&url=https%3A%2F%2Fgithub.com%2Fscriptex&via=scriptexbg&hashtags=software%2Cgithub%2Ccode%2Cawesome" title="Tweet"> <img src="https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter&color=38A1F3" /> </a> <a href="https://paypal.me/scriptex" title="Donate on Paypal"> <img src="https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal&color=222d65" /> </a> <a href="https://revolut.me/scriptex" title="Donate on Revolut"> <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json" /> </a> <a href="https://patreon.com/atanas" title="Become a Patron"> <img src="https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon&color=e64413" /> </a> <a href="https://ko-fi.com/scriptex" title="Buy Me A Coffee"> <img src="https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi" /> </a> <a href="https://liberapay.com/scriptex/donate" title="Donate on Liberapay"> <img src="https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay&logo=liberapay" /> </a> <a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" title="Donate Bitcoin"> <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" /> </a> <a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" title="Donate Etherium"> <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" /> </a> <a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" title="Donate Shiba Inu"> <img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" /> </a> </div>