Direction-aware Content Reveal Effects – Direction Reveal

Category: Animation , Javascript | November 7, 2022
Author:NigelOToole
Views Total:76 views
Official Page:Go to website
Last Update:November 7, 2022
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
  • Flip
  • roll-out

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', 'flip', 'roll-out', or 'rotate'
      animationName: 'swing',
      // for enter event
      animationPostfixEnter: 'enter',
      // for leave event
      animationPostfixLeave: 'leave',
      // enable touch event
      enableTouch: true,
      // in milliseconds
      touchThreshold: 250 
      
});

Changelog:

v2.0.2 (11/07/2022)

  • Update

You Might Be Interested In:


Leave a Reply