fade-to-view v1.0.6

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!