Direction-aware Content Reveal Effects – Direction Reveal

Author
In CSS Tutorial, Hover Effects Dec 10, 2017

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="https://www.cssscript.com/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 }); 

The post Direction-aware Content Reveal Effects – Direction Reveal appeared first on CSS Script.

Leave a Reply

Your email address will not be published. Required fields are marked *