Wondering what’s next for npm?Check out our public roadmap! »

    fade-to-view

    1.0.6 • Public • Published

    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!

    Install

    npm i fade-to-view

    DownloadsWeekly Downloads

    11

    Version

    1.0.6

    License

    ISC

    Unpacked Size

    3.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar