<commit_before># Vanilla Scroll Appear

A simple Vanilla JS library to reveal elements on vertical scroll. Check the [live demo](https://www.spharian.be/lab/scroll-appear).

```js
new ScrollAppear(selector, [options]);
```

## Installation

### npm

Install the package:
```
$ npm install --save scroll-appear
```

Import the class:
```jsx
import ScrollAppear from "scroll-appear";
```

### HTML script tag
Download the `lib/scroll-appear.min.js` file and include it in your HTML:
```html
<script src="scroll-appear.min.js"></script>
```

## Usage

In your HTML, set a `data-appear-offset` attribute with an integer value to your elements and choose an "appearing" class.

Example:
```html
<button data-appear-offset="800" class="appear hidden">Appearing button</button>
```

Then instantiate the class:
```js
new ScrollAppear(".appear");
```

By default, an `hidden` class will be added/removed whenever the scroll reaches the given offset. Read the [Configuration](https://github.com/Spharian/scroll-appear#configuration) section to change this class name.

# Configuration

The `ScrollAppear` class accepts an options hash as second argument. Available options:

Option               | Type   | Default  | Description
-------------------- | ------ | -------- | -----------
`defaultToggleClass` | string | `hidden` | Name of the added/removed class when the element scroll offset is reached/unreached.

Some data attributes are also available for the **DOM elements**:

Option               | Type    | Default         | Description
-------------------- | ------- | --------------- | -----------
`data-appear-offset` | integer | null (required) | Whenever the scroll height is equal to this value, the default class (`hidden` by default) is removed.
`data-appear-toggle-class` | string | null | Name of the added/removed class when the element scroll offset is reached/unreached. Overrides the option passed to the `ScrollAppear` class.

## Browser Compatibility
- Chrome 24+
- Safari 6.1+
- iOS Safari 7.1+
- Firefox 23+
- Opera 15+
- IE10+

## Development
- Clone this repo
- `npm install`
- `gulp` or `gulp watch` if you prefer to launch a livereload server<commit_msg>Fix readme<commit_after># Vanilla Scroll Appear

A simple Vanilla JS library to reveal elements on vertical scroll. Check the [live demo](https://www.spharian.be/lab/scroll-appear).

```js
new ScrollAppear(selector, [options]);
```

## Installation

### npm

Install the package:
```
$ npm install --save scroll-appear
```

Import the class:
```jsx
import ScrollAppear from "scroll-appear";
```

### HTML script tag
Download the `lib/scroll-appear.min.js` file and include it in your HTML:
```html
<script src="scroll-appear.min.js"></script>
```

## Usage

In your HTML, set a `data-appear-offset` attribute with an integer value to your elements and choose an "appearing" class.

Example:
```html
<button data-appear-offset="800" class="appear hidden">Appearing button</button>
```

Then instantiate the class:
```js
new ScrollAppear(".appear");
```

By default, an `hidden` class will be added/removed whenever the scroll reaches the given offset. Read the [Configuration](https://github.com/Spharian/scroll-appear#configuration) section to change this class name.

# Configuration

The `ScrollAppear` class accepts an options hash as second argument. Available options:

Option               | Type   | Default  | Description
-------------------- | ------ | -------- | -----------
`defaultToggleClass` | string | `hidden` | Name of the added/removed class when the element scroll offset is reached/unreached.

Some data attributes are also available for the **DOM elements**:

Option               | Type    | Default         | Description
-------------------- | ------- | --------------- | -----------
`data-appear-offset` | integer | null (required) | Whenever the scroll height is equal to this value, the default class (`hidden` if not changed in global options) is removed.
`data-appear-toggle-class` | string | null | Name of the added/removed class when the element scroll offset is reached/unreached. Overrides the global options.

## Browser Compatibility
- Chrome 24+
- Safari 6.1+
- iOS Safari 7.1+
- Firefox 23+
- Opera 15+
- IE10+

## Development
- Clone this repo
- `npm install`
- `gulp` or `gulp watch` if you prefer to launch a livereload server
{'fraction_non_alphanumeric': 0.15207373271889402, 'fraction_numerical': 0.0069124423963133645, 'mean_word_length': 3.2558823529411764, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3416939', 'n_tokens_mistral': 1269, 'n_tokens_neox': 1194, 'n_words': 472}