Switch to local images for demo rather than Unsplash API as it can be…

… slow

README.md

@@ -2,6 +2,7 @@
 
 [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.
 
 

index.html

@@ -39,17 +39,17 @@ <h3>Swing animation</h3>
 
     <div class="direction-reveal direction-reveal--3-grid-flexbox direction-reveal--demo-swing">
 
-      <a href="#" class="direction-reveal__card" tabindex="0">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+      <a href="#" class="direction-reveal__card">
+        <img src="images/mountain-1.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
           <p class="direction-reveal__text">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.</p>
         </div>
       </a>
 
-      <a href="#" class="direction-reveal__card" tabindex="0">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+      <a href="#" class="direction-reveal__card" >
+        <img src="images/mountain-2.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -58,7 +58,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-3.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -67,7 +67,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-4.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -76,7 +76,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-5.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -85,7 +85,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-6.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -104,7 +104,7 @@ <h3 class="">Slide animation</h3>
     <div class="direction-reveal direction-reveal--3-grid-flexbox direction-reveal--demo-slide">
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-1.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -113,7 +113,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-2.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -122,7 +122,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-3.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -131,7 +131,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-4.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -140,7 +140,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-5.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -149,7 +149,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-6.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -168,7 +168,7 @@ <h3 class="">Rotate animation</h3>
     <div class="direction-reveal direction-reveal--3-grid-flexbox direction-reveal--demo-rotate">
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-1.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -177,7 +177,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-2.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -186,7 +186,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-3.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -195,7 +195,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-4.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -204,7 +204,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-5.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -213,7 +213,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
       </a>
 
       <a href="#" class="direction-reveal__card">
-        <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+        <img src="images/mountain-6.jpg" alt="Image" class="img-fluid">
 
         <div class="direction-reveal__overlay">
           <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -235,7 +235,7 @@ <h3 class="">Bootstrap 4 grid integration</h3>
 
         <div class="col-sm-4">
           <a href="#" class="direction-reveal__card">
-            <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+            <img src="images/mountain-1.jpg" alt="Image" class="img-fluid">
 
             <div class="direction-reveal__overlay">
               <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -246,7 +246,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
 
         <div class="col-sm-4">
           <a href="#" class="direction-reveal__card">
-            <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+            <img src="images/mountain-2.jpg" alt="Image" class="img-fluid">
 
             <div class="direction-reveal__overlay">
               <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -257,7 +257,7 @@ <h3 class="direction-reveal__title">Lorem ipsum</h3>
 
         <div class="col-sm-4">
           <a href="#" class="direction-reveal__card">
-            <img src="images/nebula.jpg" alt="Mountain" class="img-fluid">
+            <img src="images/mountain-3.jpg" alt="Image" class="img-fluid">
 
             <div class="direction-reveal__overlay">
               <h3 class="direction-reveal__title">Lorem ipsum</h3>
@@ -333,7 +333,7 @@ <h3>Run demo site</h3>
 
 
   <div class="container">
-    <p>Inspired by a codepen from <a href="https://codepen.io/noeldelgado/pen/pGwFx" target="_blank">Noel Delgado</a>, this <a href="https://stackoverflow.com/a/3647634" target="_blank">Stack overflow answer</a> and the article <a href="https://www.kirupa.com/html5/get_element_position_using_javascript.htm" target="_blank">Get an Element's postion using javascript</a>. <a href="https://unsplash.com" target="_blank">Images from Unsplash.</a>
+    <p>Inspired by a codepen from <a href="https://codepen.io/noeldelgado/pen/pGwFx" target="_blank">Noel Delgado</a>, this <a href="https://stackoverflow.com/a/3647634" target="_blank">Stack overflow answer</a> and the article <a href="https://www.kirupa.com/html5/get_element_position_using_javascript.htm" target="_blank">Get an Element's postion using javascript</a>.<br><a href="https://unsplash.com" target="_blank">Images from Unsplash.</a>
     </p>
   </div>