✨ add support for videos #41

geosigno · geosigno · commit bc258abfcf04 · 2020-04-08T08:08:48.000+04:00
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Simply copy/paste the below snippet just before your closing `</body>` tag:
 or use the below CDN link provided by [jsDelivr.com](https://www.jsdelivr.com/package/npm/simple-parallax-js):
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.3.0/dist/simpleParallax.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.4.0/dist/simpleParallax.min.js"></script>
 ```
 
 ### Via [npm/yarn](https://www.npmjs.com/package/simple-parallax-js)
@@ -74,6 +74,20 @@ You can also choose to apply the parallax on multiple images:
 const images = document.querySelectorAll('img');
 new simpleParallax(images);
 ```
+
+simpleParallax now works with video:
+
+```html
+<video>
+  <source src="video.mp4" type="video/mp4">
+</video>
+```
+
+```javascript
+var video = document.getElementsByTagName('video');
+new simpleParallax(video);
+```
+
 ## Settings
 
 Setting | Type | Default | Hint
diff --git a/dist/simpleParallax.js b/dist/simpleParallax.js
@@ -1,7 +1,7 @@
 /*!
- * simpleParallax - simpleParallax is a simple JavaScript library that gives your website parallax animations on any images, 
- * @date: 07-04-2020 18:47:4, 
- * @version: 5.3.0,
+ * simpleParallax - simpleParallax is a simple JavaScript library that gives your website parallax animations on any images or videos, 
+ * @date: 08-04-2020 8:7:34, 
+ * @version: 5.4.0,
  * @link: https://simpleparallax.com/
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -184,20 +184,25 @@ var cssTransform = function cssTransform() {
 
 /* harmony default export */ var helpers_cssTransform = (cssTransform());
 // CONCATENATED MODULE: ./src/helpers/isImageLoaded.js
-// check if image is fully loaded
-var isImageLoaded = function isImageLoaded(image) {
-  // check if image is set as the parameter
-  if (!image) {
+// check if media is fully loaded
+var isImageLoaded = function isImageLoaded(media) {
+  //if the media is a video, return true
+  if (media.tagName.toLowerCase() == 'video') {
+    return true;
+  } // check if media is set as the parameter
+
+
+  if (!media) {
     return false;
-  } // check if image has been 100% loaded
+  } // check if media has been 100% loaded
 
 
-  if (!image.complete) {
+  if (!media.complete) {
     return false;
-  } // check if the image is displayed
+  } // check if the media is displayed
 
 
-  if (typeof image.naturalWidth !== 'undefined' && image.naturalWidth === 0) {
+  if (typeof media.naturalWidth !== 'undefined' && media.naturalWidth === 0) {
     return false;
   }
 
@@ -545,6 +550,7 @@ function () {
       overflow: false,
       transition: 'cubic-bezier(0,0,0,1)',
       customContainer: false,
+      customWrapper: false,
       maxTransition: 0
     };
     this.settings = Object.assign(this.defaults, options); // check if the browser handle the Intersection Observer API
diff --git a/dist/simpleParallax.min.js b/dist/simpleParallax.min.js
diff --git a/index.html b/index.html
@@ -20,15 +20,17 @@
             /* div{
                 overflow: hidden;
             } */
-            img {
-                max-width: 850px;
+            img,
+            video {
+                width: 850px;
                 height: auto;
             }
 
             .simpleParallax {
                 /* margin: 0 0 48px; */
             }
         </style>
+
     </head>
     <body>
         <section class="container">
@@ -38,6 +40,13 @@
                     <img class="up" src="https://simpleparallax.com/images/image03.jpg" alt="simpleParallax image" />
                 </picture>
             </div>
+            <div>
+                <video width="400" autoplay>
+                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
+                    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
+                    Your browser does not support HTML5 video.
+                </video>
+            </div>
             <div>
                 <img class="up" src="https://simpleparallax.com/images/image03.jpg" alt="simpleParallax image" />
             </div>
@@ -280,5 +289,11 @@
                 <img class="up" src="https://simpleparallax.com/images/image03.jpg" alt="simpleParallax image" />
             </div> -->
         </section>
+        <!-- <script>
+            console.log(document.querySelector('video'));
+            document.querySelector('video').addEventListener('loadstart', function() {
+            console.log('loaded');
+        });
+        </script> -->
     </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "simple-parallax-js",
-    "version": "5.3.0",
-    "description": "simpleParallax is a simple JavaScript library that gives your website parallax animations on any images",
+    "version": "5.4.0",
+    "description": "simpleParallax is a simple JavaScript library that gives your website parallax animations on any images or videos",
     "homepage": "https://simpleparallax.com/",
     "main": "./dist/simpleParallax.min.js",
     "types": "./index.d.ts",
@@ -18,6 +18,7 @@
         "fast",
         "light",
         "image",
+        "video",
         "effect",
         "vanilla",
         "es6"
diff --git a/src/helpers/isImageLoaded.js b/src/helpers/isImageLoaded.js
@@ -1,17 +1,22 @@
-// check if image is fully loaded
-const isImageLoaded = (image) => {
-    // check if image is set as the parameter
-    if (!image) {
+// check if media is fully loaded
+const isImageLoaded = (media) => {
+    //if the media is a video, return true
+    if (media.tagName.toLowerCase() == 'video') {
+        return true;
+    }
+
+    // check if media is set as the parameter
+    if (!media) {
         return false;
     }
 
-    // check if image has been 100% loaded
-    if (!image.complete) {
+    // check if media has been 100% loaded
+    if (!media.complete) {
         return false;
     }
 
-    // check if the image is displayed
-    if (typeof image.naturalWidth !== 'undefined' && image.naturalWidth === 0) {
+    // check if the media is displayed
+    if (typeof media.naturalWidth !== 'undefined' && media.naturalWidth === 0) {
         return false;
     }
 
diff --git a/src/simpleParallax.js b/src/simpleParallax.js
@@ -21,6 +21,7 @@ export default class SimpleParallax {
             overflow: false,
             transition: 'cubic-bezier(0,0,0,1)',
             customContainer: false,
+            customWrapper: false,
             maxTransition: 0,
         };
 
diff --git a/test/index.js b/test/index.js
@@ -8,13 +8,13 @@ import simpleParallax from '../src/simpleParallax';
 let instanceUp;
 const optionUp = {
     orientation: 'up',
-    scale: 1.5,
-    customWrapper: '.customWrapper'
+    scale: 1.3,
+    // customWrapper: '.customWrapper'
     // customContainer: document.querySelector('.container')
 };
 const imageUp = document.getElementsByTagName('img');
 
-const images = document.querySelectorAll('img');
+const images = document.querySelectorAll('video, img');
 // images.forEach((image) => {
 const instance = new simpleParallax(images, optionUp);
 // });
