Author: | NigelOToole |
---|---|
Views Total: | 117 views |
Official Page: | Go to website |
Last Update: | November 7, 2022 |
License: | MIT |
Preview:

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