diff --git a/README.md b/README.md index 7cb8e72..b809c84 100644 --- a/README.md +++ b/README.md @@ -3,15 +3,79 @@ [Live demo](http://nigelotoole.github.io/direction-reveal/) ## Direction aware content reveals -This plugin detects the side a user enters and exits a block, allowing you to reveal and hide content based on this direction. +This plugin detects which direction a user enters/exits a block, allowing you to reveal/hide content based on this direction. +The hidden content can animate in from the direction the user enters and animate out the direction the user leaves, allowing you to create interesting animation effects. + + + +## Installation +```javascript +$ npm install direction-reveal --save-dev +``` ## Usage -Once you have downloaded the code, run the commands below to view the demo. +### Import + +The script is an ES6(ES2015) module but a compiled version is included in the build as index.js. You can also copy scripts/direction-reveal.js into your own site if your build process can accomodate ES6 modules, Babel and Browserify are used in the demo site. ```javascript -$ npm install direction-reveal --save-dev +import DirectionReveal from 'direction-reveal'; + +// Init with default setup +const directionRevealDemo = DirectionReveal(); + +// Init with all options at default setting +const directionRevealSwing = DirectionReveal({ + selector: '.direction-reveal', // Container element selector. + itemSelector: '.direction-reveal__card', // Item element selector. + animationName: 'swing', // Animation CSS class. + enableTouch: true, // Adds touch event to show content on first click then follow link on the second click. + touchThreshold: 250 // Touch length must be less than this to trigger reveal which prevents the event triggering if user is scrolling. +}); +``` + + +### HTML + +```html + <div class="direction-reveal"> + + <a href="#" class="direction-reveal__card"> + <img src="images/image.jpg" alt="Image" class="img-fluid"> + + <div class="direction-reveal__overlay"> + <h3 class="direction-reveal__title">Title</h3> + <p class="direction-reveal__text">Description text.</p> + </div> + </a> + + ... + + </div> +``` + + +### Using other tags +The demos use <a> tags for the "direction-reveal__card" but a <div> can be used as below, specifiying the tabindex ensures keyboard navigation works as expected. They can all have a value of 0 and will follow the source order of the divs. + +```html +<div class="direction-reveal__card" tabindex="0"> + ... +</div> +``` + +### Touch support +The plugin will detect touch support and reveal the hidden content on first click then follow link on the second click. This can be disabled in the options. + + + +## Demo site +Clone or download from Github. + +```javascript +$ npm install $ gulp serve ``` diff --git a/gulpfile.js b/gulpfile.js index bfe0a89..ae53229 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -25,7 +25,9 @@ gulp.task('styles', () => { }); +// Compiles scripts for browser gulp.task('scripts', () => { + const browserifyBundle = browserify({ entries: `scripts/main.js`, transform: babelify, @@ -40,10 +42,23 @@ gulp.task('scripts', () => { .pipe($.sourcemaps.write('.')) .pipe(gulp.dest(`scripts`)) .pipe(reload({ stream: true })) + }); -gulp.task('serve', ['styles'], () => { +// Compiles scripts to UMD for NPM +gulp.task('scriptsNPM', () => { + return gulp.src('scripts/direction-reveal.js') + .pipe($.plumber()) + .pipe($.babel({ + plugins: ['transform-es2015-modules-umd'] + })) + .pipe($.rename('index.js')) + .pipe(gulp.dest('./')) +}); + + +gulp.task('serve', ['styles', 'scripts', 'scriptsNPM'], () => { browserSync.init({ notify: false, port: 9000, @@ -52,14 +67,9 @@ gulp.task('serve', ['styles'], () => { } }); - gulp.watch([ - '*.html' - // 'styles/**/*', - // 'scripts/**/*' - ]).on('change', reload); - + gulp.watch(['*.html']).on('change', reload); gulp.watch('styles/**/*.scss', ['styles']); - gulp.watch('scripts/**/*.js', ['scripts']); + gulp.watch('scripts/**/*.js', ['scripts', 'scriptsNPM']); }); gulp.task('default', ['serve']); diff --git a/index.html b/index.html index e9a08e8..3900c0f 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Direction Reveal - Direction aware content reveals. + Direction Reveal - Direction aware content reveals @@ -16,7 +16,7 @@

Direction Reveal

- +
Download View on GitHub @@ -27,8 +27,8 @@

Direction Reveal

Direction aware content reveals.

-

This plugin detects the side a user enters and exits a block, allowing you to reveal and hide content based on this direction.

-

The hidden content can animate in from the side the user enters and animate out the direction the user leaves, allowing you to create interesting animation effects.

+

This plugin detects which direction a user enters/exits a block, allowing you to reveal/hide content based on this direction.

+

The hidden content can animate in from the direction the user enters and animate out the direction the user leaves, allowing you to create interesting animation effects.

@@ -38,63 +38,63 @@

Examples

Swing animation

- + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - +
- +
@@ -102,61 +102,61 @@

Lorem ipsum

Slide animation

- + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - +
@@ -166,65 +166,65 @@

Lorem ipsum

Rotate animation

- + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - + Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 - +
- +

Bootstrap 4 grid integration

@@ -236,7 +236,7 @@

Bootstrap 4 grid integration

Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

@@ -247,7 +247,7 @@

Lorem ipsum

Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

@@ -258,16 +258,16 @@

Lorem ipsum

Image - +

Lorem ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.

 -
- +
+
- +
@@ -281,23 +281,25 @@

Installation

 $ npm install direction-reveal --save-dev
- +

Usage

-

The script is an ES6(ES2015) module so your site build process needs to accomodate this, Babel and Browserify are used in the demo site.

+

Import

+ +

The script is an ES6(ES2015) module but a compiled version is included in the build as index.js. You can also copy scripts/direction-reveal.js into your own site if your build process can accomodate ES6 modules, Babel and Browserify are used in the demo site.

-
// Import module
+

 import DirectionReveal from 'direction-reveal';
 
 // Init with default setup
-const directionReveal = DirectionReveal();
-  
+const directionRevealDemo = DirectionReveal();
+
 // Init with all options at default setting
-const directionReveal = DirectionReveal({
+const directionRevealSwing = DirectionReveal({
   selector: '.direction-reveal',              // Container element selector.
   itemSelector: '.direction-reveal__card',    // Item element selector.
   animationName: 'swing',                     // Animation CSS class.
@@ -306,29 +308,54 @@ 
Usage

 });
 

 
-      
Touch support

 
-      
The plugin will detect touch support and reveal the hidden content on first click then follow link on the second click. This can be disabled in the options.

+      
HTML

+
+

+  <div class="direction-reveal">
+
+    <a href="#" class="direction-reveal__card">
+      <img src="images/image.jpg" alt="Image" class="img-fluid">
+
+      <div class="direction-reveal__overlay">
+        <h3 class="direction-reveal__title">Title</h3>
+        <p class="direction-reveal__text">Description text.</p>
+      </div>
+    </a>
+
+    ...
+
+  </div>
+

+
 
       
Using other tags

-      
+
       
The demos use <a> tags for the "direction-reveal__card" but a <div> can be used as below, specifiying the tabindex ensures keyboard navigation works as expected. They can all have a value of 0 and will follow the source order of the divs.

 
 
<div class="direction-reveal__card" tabindex="0">
   ...
 </div>
 

-  
 
-                    
-      
Run demo site

-      
Clone or download from github.

+
+      
Touch support

+
+      
The plugin will detect touch support and reveal the hidden content on first click then follow link on the second click. This can be disabled in the options.

+
+
+ + +
+

Demo site

+

Clone or download from Github.

$ npm install
 $ gulp serve
+ @@ -336,7 +363,7 @@

Run demo site

Inspired by a codepen from Noel Delgado, this Stack overflow answer and the article Get an Element's postion using javascript.
Images from Unsplash.

- +