@basith374/parallax-background - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.js

@@ -10,3 +10,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var STEP = 0.2;
-var Parallax = function Parallax(_ref) {
+function Parallax(_ref) {
   var images = _ref.images;
@@ -34,5 +34,5 @@ var refs = React.useRef({});
 
-    for (var i in refs.current) {
+    for (var i = 0; i < Object.keys(refs.current).length; i++) {
       var el = refs.current[i];
-      var ratio = 1 - STEP * i;
+      var ratio = STEP * 10 * (i + 1) / 10;
       el.style.left = ratio * (left - MARGIN) + 'px';
@@ -56,5 +56,5 @@ el.style.top = ratio * (top - MARGIN) + 'px';
   }));
-};
+}
 
-exports.Parallax = Parallax;
+module.exports = Parallax;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -7,3 +7,3 @@ import React, { useRef, useEffect } from 'react';
 var STEP = 0.2;
-var Parallax = function Parallax(_ref) {
+function Parallax(_ref) {
   var images = _ref.images;
@@ -31,5 +31,5 @@ var refs = useRef({});
 
-    for (var i in refs.current) {
+    for (var i = 0; i < Object.keys(refs.current).length; i++) {
       var el = refs.current[i];
-      var ratio = 1 - STEP * i;
+      var ratio = STEP * 10 * (i + 1) / 10;
       el.style.left = ratio * (left - MARGIN) + 'px';
@@ -53,5 +53,5 @@ el.style.top = ratio * (top - MARGIN) + 'px';
   }));
-};
+}
 
-export { Parallax };
+export default Parallax;
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "@basith374/parallax-background",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An interactive parallax image component",
@@ -5,0 +5,0 @@ "keywords": ["react", "component", "image"],

README.md

@@ -5,2 +5,6 @@ # parallax-background
 
+![preview](http://assets.basithkunimal.com/parallax-background.gif)
+
+Here's a [working demo](http://parallax-background.basithkunimal.com)
+
 [![NPM](https://img.shields.io/npm/v/@basith374/parallax-background.svg)](https://www.npmjs.com/package/parallax-background) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![build](https://github.com/basith374/parallax-background/actions/workflows/main.yml/badge.svg)](https://github.com/basith374/parallax-background/actions/workflows/main.yml)
@@ -22,5 +26,9 @@
 
+import bg0 from './assets/bg1.png';
+import bg1 from './assets/bg2.png';
+import bg2 from './assets/bg3.png';
+
 class Example extends Component {
   render() {
-    return <Parallax />
+    return <Parallax images={[bg0, bg1, bg2]} />
   }
@@ -30,4 +38,6 @@ }
 
+> NOTE: Make sure the parent container has some height since the root container uses `height:100%`
+
 ## License
 
 MIT © [basith374](https://github.com/basith374)

No alert changes

Improved metrics

Total package byte prevSize

13959

increased by7.47%

Number of lines in readme file

41

increased by32.26%

No dependency changes