https://github.com/daybrush/page

You can check the page in and out of the screen.
https://github.com/daybrush/page

dom enter exit io page visible

Last synced: 6 days ago
JSON representation

You can check the page in and out of the screen.

• Host: GitHub
• URL: https://github.com/daybrush/page
• Owner: daybrush
• Created: 2019-02-08T18:15:48.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-12T13:32:35.000Z (almost 6 years ago)
• Last Synced: 2024-10-19T23:21:36.730Z (26 days ago)
• Topics: dom, enter, exit, io, page, visible
• Language: TypeScript
• Homepage: https://daybrush.com
• Size: 140 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @daybrush/page  [![npm version](https://badge.fury.io/js/%40daybrush%2Fpage.svg)](https://badge.fury.io/js/%40daybrush%2Fpage)

You can check the page in and out of the screen. 

Setting the range allows you to check in and out of the range.

[**API Documentation**](https://daybrush.com/page/release/latest/doc/index.html)

```

$ npm i @daybrush/page

```

```js

import Page from "@daybrush/page";

const pages = new Page.s({

  events: ["resize", "scroll"],

});

const page1 = new Page(".page1");

page1.on({

  "enter": e => {

    e.target.classList.add("enter");

  },

  "exit": e => {

    e.target.classList.remove("enter");

  },

});

const page2 = new Page(".page2");

page2.on({

  "enter": e => {

    e.target.classList.add("enter");

  },

  "exit": e => {

    e.target.classList.remove("enter");

  },

});

page2.range(["100% - 80", "100%"]).on({

  "enter": e => {

    utils.addClass(header, "white");

  },

  "exit": e => {

    utils.removeClass(header, "white");

  },

});

pages.add(page1);

pages.add(page2);

pages.scroll();

```