fade-to-view/readme.md

This package fades in your elements when they are scrolled into view.

**Fade to view**

This package fades in elements into view as user navigates through the page. Cool addition for any website.

How to use?

**Step 1:** Install with NPM.

```
npm install --save fade-to-view
npm install --save-dev style-loader css-loader
```

**Step 2:** Add the following code to your module.exports object in webpack.config.js:

```
module: {
	rules: [
	  {
		test: /\.css$/,
		use: [
		  'style-loader',
		  'css-loader'
		]
	  }
	]
}
```

**Step 3:** Using Webpack, load the required JS:

```
import "fade-to-view";
```

**JS**

Inside the JavaScript file, there is only one variable that can be customised:

```
const triggerPos = 0.9;
```

Change its value to customise how far the element has to be from the top of the screen in order for it to show up. 0.9 = 90%.

**CSS**

Inside the CSS file, there are some variables that can be customised:

```
.ftv {
  opacity: 0; // Initial opacity.
  ...
}

.ftv-show {
  ...
  opacity: 1; // Final opacity.
  transform: translateY(-100px); // Direction and distance of the fade in. Negative value = fade in from the bottom. Positive value = fade in from the top.
  transform: translateX(0px); // Negative value = fade in from the left. Positive value = fade in from the right.
}
```

**HTML**

Inside the HTML file, simply add "ftv" class to the element you want to fade in.


Example:

```
<div class="myElement-wrap ftv">
	<div class="myElement">
		...
	</div>
</div>
```


**Enjoy!**