Direction-aware Content Reveal Effects – Direction Reveal

Category: Animation , Javascript | December 6, 2017
Author: NigelOToole
Views Total: 55
Official Page: Go to website
Last Update: December 6, 2017
License: MIT

Preview:

Direction-aware Content Reveal Effects – Direction Reveal

Description:

Direction Reveal is a JavaScript library written in ES 6 for direction-aware content reveal effects that animate in the content from the direction you are moving with the mouse and touch events.

Available effects:

  • Swing
  • Slide
  • Rotate

How to use it:

Install the Direction Reveal via NPM.

# NPM
$ npm install direction-reveal --save

Import the module.

import DirectionReveal from 'direction-reveal';

The html structure.

<div class="direction-reveal">

  <a href="#" class="direction-reveal__card">
    <img src="1.jpg" alt="Image" class="img-fluid">

    <div class="direction-reveal__overlay">
      <h3 class="direction-reveal__title">Title 1</h3>
      <p class="direction-reveal__text">Description 1</p>
    </div>
  </a>

  <a href="#" class="direction-reveal__card">
    <img src="2.jpg" alt="Image" class="img-fluid">

    <div class="direction-reveal__overlay">
      <h3 class="direction-reveal__title">Title 2</h3>
      <p class="direction-reveal__text">Description 2</p>
    </div>
  </a>

  <a href="#" class="direction-reveal__card">
    <img src="3.jpg" alt="Image" class="img-fluid">

    <div class="direction-reveal__overlay">
      <h3 class="direction-reveal__title">Title 3</h3>
      <p class="direction-reveal__text">Description 3</p>
    </div>
  </a>

  ...

</div>

Initialize the library and done.

const directionRevealDemo = DirectionReveal();

Possible options to customize the content reveal effects.

const directionRevealDemo = DirectionReveal({

      // container element
      selector: '.direction-reveal',

      // item element
      itemSelector: '.direction-reveal__card', 

      // 'swing', 'slide' or 'rotate'
      animationName: 'swing',

      // enable touch event
      enableTouch: true,

      // in milliseconds
      touchThreshold: 250 
      
});

Leave a Reply