fade-to-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!