react-parallax-component - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

package.json

 {
   "name": "react-parallax-component",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Easiest way to add scroll parallax effect on the component",
@@ -23,2 +23,5 @@ "scripts": {
   "author": "https://github.com/keske",
+  "contributors": [
+    "Jérémie Boulay (https://github.com/Jeremboo)"
+  ],
   "license": "MIT",
@@ -25,0 +28,0 @@ "devDependencies": {

README.md

@@ -18,6 +18,8 @@ # React Parallax Component
 ```javascript
-<ParallaxComponent speed="0.003"
-                   width="300"
-                   top="40%"
-                   left="100">
+<ParallaxComponent
+  speed="0.003"
+  width="300"
+  top="40%"
+  left="100"
+>
   <div>
@@ -24,0 +26,0 @@ Children component

src/example/index.js

@@ -11,2 +11,3 @@ import React, { Component } from 'react';
 const WORD = 'AWESOME REACT';
+const random = (min, max) => Math.random() * (max - min) + min;
 
@@ -21,18 +22,20 @@ export default class ExamplePage extends Component {
     return (
-      <div className={styles}
-           style={wrap}>
-
-      {
-        WORD.split('').map((letter, index) =>
-          <ParallaxComponent speed={Math.floor(Math.random() * (2 - 0) + 0) === 1 ? '-' : '' + Math.random() * (0.1 - 0) + 0}
-                             top="40%"
-                             left={(index + 1) * 80}
-                             key={index}>
-            <span className="letter">
-              {letter}
-            </span>
-          </ParallaxComponent>
-        )
-      }
-
+      <div
+        className={styles}
+        style={wrap}
+      >
+        {
+          WORD.split('').map((letter, index) =>
+            <ParallaxComponent
+              speed={random(0, 0.1) * ((random(0, 2) > 1) ? 1 : -1)}
+              top="40%"
+              left={(index + 1) * 80}
+              key={index}
+            >
+              <span className="letter">
+                {letter}
+              </span>
+            </ParallaxComponent>
+          )
+        }
       </div>
@@ -39,0 +42,0 @@ );

src/index.js

@@ -10,3 +10,3 @@ import React, { Component } from 'react';
     children: React.PropTypes.object,
-    speed: React.PropTypes.string,
+    speed: React.PropTypes.number,
 
@@ -27,3 +27,3 @@ // Style
     right: 'inherit',
-    speed: '-0.03',
+    speed: -0.03,
   }
@@ -50,3 +50,3 @@
       ? window.innerHeight * (top.replace('%', '') / 100)
-      : +top;
+      : parseInt(top, 10);
   }
@@ -61,4 +61,3 @@
     const pageTop = window.pageYOffset;
-    const elemTop = this.refs.parallaxElement.offsetTop;
-    const newTop = (((pageTop - elemTop) * (+speed * -1)) + top).toFixed(0);
+    const newTop = (top - (pageTop * speed));
 
@@ -71,5 +70,7 @@ // Set new top position
     return (
-      <div className={styles}
-           ref="parallaxElement"
-           style={{...this.props}}>
+      <div
+        className={styles}
+        ref="parallaxElement"
+        style={{...this.props}}
+      >
         <div>
@@ -76,0 +77,0 @@ {this.props.children}

New alerts

AI-detected potential code anomaly

Supply chain risk

AI has identified unusual behaviors that may pose a security risk.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2894984

0.08%

Lines of code

768

0.79%

Number of lines in readme file

52

4%

Worsened metrics

Number of low supply chain risk alerts

2

100%

No dependency changes