react-simple-parallax - npm Package Compare versions

Comparing version 0.1.4 to 0.2.0

index.js

@@ -6,7 +6,2 @@ 'use strict'
 
-// Limiting position
-var clamp = function clamp(x, low, high) {
-  return Math.min(Math.max(x, low), high);
-};
-
 module.exports = React.createClass({
@@ -16,4 +11,4 @@ // Define initial values
     return {
-      speed: this.props.speed ? this.props.speed : 100, // Check if property speed is present if not set default value
-      style: {}
+      speedDivider: this.props.speedDivider ? this.props.speedDivider : 4, // Check if property speed is present if not set default value
+      backgroundStyle: this.props.backgroundStyle ? this.props.backgroundStyle : '', // Check if thers is a direct style applied to the parallax background
     }    
@@ -23,8 +18,16 @@ },
     // Add event listener to the window
-    window.addEventListener('scroll', this._calcTranslation)
+    window.addEventListener('scroll', setInterval(this._calcTranslation), 10);
 
-    // Set inline style attributes
-    if(this.props.style != 'undefined') {
-      this.refs.parallax.setAttribute('style', this.props.style);
+    // Set basic style rules for a parallax effect
+    this.refs.background.setAttribute('style', 'width: 100%; top: 0; bottom: 0; background-size: cover ;background-position: 50% 0; background-repeat: no-repeat;');
+
+    for(var key in this.state.backgroundStyle) {
+      this.refs.background.style[key] = this.state.backgroundStyle[key];
     }
+
+    // Set properties directly to avoid possible defined inline style
+    this.refs.content.style.position = 'absolute';
+    this.refs.content.style.left = 0;
+    this.refs.content.style.right = 0;
+
   },
@@ -38,20 +41,19 @@ componentWillUnmount: function() {
     var _window = window;
-    var scrollY = _window.scrollY;
-    var el = ReactDOM.findDOMNode(this);
-    var offsetTop = el.offsetTop;
-    var offsetHeight = el.offsetHeight;
-    var d = (scrollY - offsetTop) * .75 / offsetHeight;
-    var t = "translateY(-" + clamp((d * this.state.speed).toFixed(2), (-.25 * offsetHeight).toFixed(2), (.75 * offsetHeight).toFixed(2)) + "px) translateZ(0)";
+    var translateValue = _window.scrollY / this.state.speedDivider;
+    if (translateValue < 0) {
+      translateValue = 0;
+    }
 
-    // Set CSS property
-    this.setState({
-     style: {
-          transform: t
-      }
-    })
-
+    // Aplly the transform to the background element
+    var translate = 'translate3d(0px,' + translateValue + 'px, 0px)';
+    this.refs.background.style.transform = translate;
   },
   render: function() {
-    return React.createElement('div', Object.assign({}, this.props, { style : this.state.style }, { ref: 'parallax' }));
+    // Create and render elements
+    var content = React.createElement('div', Object.assign({}, this.props,  { ref: 'content' }));
+    var background = React.createElement('div', Object.assign({}, { ref: 'background', className: 'react-simple-parallax-bg' }));
+    return(
+      React.createElement('div', Object.assign({}, { ref: 'root' }), background, content)
+    )
   }
-});
+});

package.json

 {
   "name": "react-simple-parallax",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "A simple React Component for parallax effect on the front layer.",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -20,4 +20,4 @@ # react-simple-parallax
 	return (
-		<section style={section}>
-		  	<Parallax speed="400" style="padding-top: 600px">
+		<section>
+		  	<Parallax className="parallax" speedDivider="5">
 		  		<div>Hello Wolrd!</div>
@@ -30,4 +30,38 @@ </Parallax>
 ```
-## Build exemple
+## Basic styling
 
+```css
+    section {
+        text-align: center;
+    }
+    
+    /* .react-simple-parallax-bg is generate by the component */
+    section .react-simple-parallax-bg {
+        background-image: url('http://tinyurl.com/zaz7bp4');
+        height: 750px;
+    }
+    
+    section .parallax {
+        top: 200px;
+        margin: auto;
+    }
+```
+## Attributes
+- **speedDivider**: controle translation speed (default: 5)
+- **backgroundStyle**: to set the style of the background element with a javascript object (optional)
+
+#### Exemple
+```javascript
+  render () {
+	var background = {
+		height: "1000px",
+		backgroundImage: 'url(http://tinyurl.com/zaz7bp4)'
+	}
+	return (
+		<section>
+		  	<Parallax speedDivider="3" backgroundStyle={background}>
+```
+
+## Build the exemple
+
 Initial set up
@@ -34,0 +68,0 @@

src/app/index.jsx

@@ -9,9 +9,13 @@ import React from 'react';
 	var section = {
-		textAlign: 'center',
-		height: "1500px",
-		background: 'url(http://i-cdn.phonearena.com/images/articles/215289-image/Stock-LG-V10-wallpapers.jpg)'
+		textAlign: 'center'
 	}
 
+  var background = {
+      height: "1000px",
+      backgroundImage: 'url(http://tinyurl.com/zaz7bp4)'
+  }
+
 	var box = {
-		background: 'rgba(0,0,0,0.5)',
+		top: "300px",
+		background: 'rgba(0,0,0,0.8)',
 		margin: 'auto',
@@ -27,4 +31,4 @@ color: '#fff',
 		<section style={section}>
-		  	<Parallax speed="400" style="padding-top: 600px">
-		  		<div style={box}></div>
+				<Parallax style={box} className="parallax" speedDivider="5" backgroundStyle={background}>
+		  		<p>Hello World!</p>
 		  	</Parallax>
@@ -31,0 +35,0 @@ </section>

No alert changes

Improved metrics

Total package byte prevSize

7134

increased by22.94%

Lines of code

99

increased by5.32%

Number of lines in readme file

89

increased by61.82%

No dependency changes