🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-parallax

Package Overview
Dependencies
Maintainers
1
Versions
70
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-parallax - npm Package Compare versions

Comparing version

0.1.3
to
0.1.4

97

dist/Parallax.js

@@ -30,3 +30,3 @@ "use strict";

this.childStyle = this.getChildStyle();
this.parallaxStyle = this.getParallaxStyle();
this.timestamp = Date.now();
this.state = {

@@ -58,4 +58,4 @@ top: 0,

"div",
{ className: "react-parallax", style: this.parallaxStyle },
this.props.bgImage ? _react2["default"].createElement("img", { className: "react-parallax-bgimage", src: this.props.bgImage, style: this.getBackgroundStyle(), ref: "bgImage", alt: "" }) : "",
{ className: "react-parallax" },
this.props.bgImage ? _react2["default"].createElement("img", { className: "react-parallax-bgimage", src: this.props.bgImage, style: this.getBackgroundPosition(), ref: "bgImage", alt: "" }) : "",
_react2["default"].createElement(

@@ -80,12 +80,2 @@ "div",

}, {
key: "componentDidMount",
/**
* save component ref after rendering and update all values
*/
value: function componentDidMount() {
this.node = _react2["default"].findDOMNode(this);
this.updatePosition();
}
}, {
key: "componentWillUnmount",

@@ -102,5 +92,19 @@

}, {
key: "componentDidMount",
/**
* save component ref after rendering, update all values and set static style values
*/
value: function componentDidMount() {
this.node = _react2["default"].findDOMNode(this);
this.updatePosition();
this.setParallaxStyle();
this.setInitialBackgroundStyles();
}
}, {
key: "onScroll",
value: function onScroll(event) {
this.updatePosition();
if (this.isScrolledIntoView(this.node)) {
window.requestAnimationFrame(this.updatePosition);
}
}

@@ -121,2 +125,9 @@ }, {

value: function updatePosition() {
var stamp = Date.now();
if (stamp - this.timestamp < 10) {
return;
}
console.log(stamp - this.timestamp);
this.timestamp = stamp;
var img = _react2["default"].findDOMNode(this.refs.bgImage);
var autoHeight = false;

@@ -128,3 +139,2 @@ var content = _react2["default"].findDOMNode(this.refs.content);

// set autoHeight or autoWidth
var img = _react2["default"].findDOMNode(this.refs.bgImage);
if (img && img.naturalWidth / (img.naturalHeight - this.props.strength) * this.contentHeight < this.contentWidth) {

@@ -144,2 +154,19 @@ autoHeight = true;

}, {
key: "setInitialBackgroundStyles",
/**
* defines all static values for the background image
*/
value: function setInitialBackgroundStyles() {
var img = this.refs.bgImage ? _react2["default"].findDOMNode(this.refs.bgImage) : null;
if (img) {
img.style.position = "absolute";
img.style.left = "50%";
img.style.WebkitTransformStyle = "preserve-3d";
img.style.WebkitBackfaceVisibility = "hidden";
img.style.MozBackfaceVisibility = "hidden";
img.style.MsBackfaceVisibility = "hidden";
}
}
}, {
key: "onWindowResize",

@@ -155,8 +182,8 @@

}, {
key: "getBackgroundStyle",
key: "getBackgroundPosition",
/**
* returns styles for the background image, including translation by defined strength
* returns position for the background image
*/
value: function getBackgroundStyle() {
value: function getBackgroundPosition() {
var backPos = 0;

@@ -169,26 +196,25 @@ if (this.props.disabled !== true) {

var style = {
position: "absolute",
left: "50%",
WebkitTransform: "translate3d(-50%, -" + backPos + "px, 0)",
transform: "translate3d(-50%, -" + backPos + "px, 0)",
height: height,
width: width,
WebkitFilter: "blur(" + this.props.blur + "px)",
filter: "blur(" + this.props.blur + "px)"
width: width
};
if (this.props.blur) {
style.WebkitFilter = "blur(" + this.props.blur + "px)";
style.filter = "blur(" + this.props.blur + "px)";
}
return style;
}
}, {
key: "getParallaxStyle",
key: "setParallaxStyle",
/**
* returns general styles for the component
* defines styles for the parallax node that do not change during use
*/
value: function getParallaxStyle() {
var style = {
position: "relative",
background: this.props.bgColor,
overflow: "hidden"
};
return style;
value: function setParallaxStyle() {
if (this.node) {
this.node.style.position = "relative";
this.node.style.overflow = "hidden";
this.node.style.background = this.props.bgColor;
}
}

@@ -217,2 +243,9 @@ }, {

}, {
key: "isScrolledIntoView",
value: function isScrolledIntoView(element) {
var elementTop = element.getBoundingClientRect().top,
elementBottom = element.getBoundingClientRect().bottom;
return elementTop <= 0 && elementBottom >= 0 || elementTop >= 0 && elementBottom <= window.innerHeight || elementTop <= window.innerHeight && elementBottom >= window.innerHeight;
}
}, {
key: "log",

@@ -219,0 +252,0 @@ value: function log() {

2

package.json
{
"name": "react-parallax",
"author": "Richard Rutsche",
"version": "0.1.3",
"version": "0.1.4",
"description": "A React Component for parallax effect.",

@@ -6,0 +6,0 @@ "repository": {

87

src/jsx/Parallax.jsx

@@ -11,3 +11,3 @@ import React from 'react';

this.childStyle = this.getChildStyle();
this.parallaxStyle = this.getParallaxStyle();
this.timestamp = Date.now();
this.state = {

@@ -32,5 +32,5 @@ top: 0,

return (
<div className="react-parallax" style={this.parallaxStyle}>
<div className="react-parallax">
{this.props.bgImage ? (
<img className="react-parallax-bgimage" src={this.props.bgImage} style={this.getBackgroundStyle()} ref="bgImage" alt=""/>
<img className="react-parallax-bgimage" src={this.props.bgImage} style={this.getBackgroundPosition()} ref="bgImage" alt=""/>
) : ''}

@@ -53,9 +53,2 @@ <div className="react-parallax-content" style={this.childStyle} ref="content">

/**
* save component ref after rendering and update all values
*/
componentDidMount() {
this.node = React.findDOMNode(this);
this.updatePosition();
}

@@ -71,6 +64,18 @@ /**

onScroll(event) {
/**
* save component ref after rendering, update all values and set static style values
*/
componentDidMount() {
this.node = React.findDOMNode(this);
this.updatePosition();
this.setParallaxStyle();
this.setInitialBackgroundStyles();
}
onScroll(event) {
if (this.isScrolledIntoView(this.node)) {
window.requestAnimationFrame(this.updatePosition);
}
}
onWindowLoad() {

@@ -86,2 +91,9 @@ this.updatePosition();

updatePosition() {
let stamp = Date.now();
if (stamp - this.timestamp < 10) {
return;
}
console.log(stamp - this.timestamp);
this.timestamp = stamp;
let img = React.findDOMNode(this.refs.bgImage);
let autoHeight = false;

@@ -93,3 +105,2 @@ let content = React.findDOMNode(this.refs.content);

// set autoHeight or autoWidth
let img = React.findDOMNode(this.refs.bgImage);
if (img && (img.naturalWidth / (img.naturalHeight - this.props.strength) * this.contentHeight < this.contentWidth)) {

@@ -110,2 +121,17 @@ autoHeight = true;

/**
* defines all static values for the background image
*/
setInitialBackgroundStyles() {
let img = this.refs.bgImage ? React.findDOMNode(this.refs.bgImage) : null;
if (img) {
img.style.position = 'absolute';
img.style.left = '50%';
img.style.WebkitTransformStyle = 'preserve-3d';
img.style.WebkitBackfaceVisibility = 'hidden';
img.style.MozBackfaceVisibility = 'hidden';
img.style.MsBackfaceVisibility = 'hidden';
}
}
/**
* update window height and positions on window resize

@@ -119,5 +145,5 @@ */

/**
* returns styles for the background image, including translation by defined strength
* returns position for the background image
*/
getBackgroundStyle() {
getBackgroundPosition() {
let backPos = 0;

@@ -130,11 +156,11 @@ if (this.props.disabled !== true) {

let style = {
position: 'absolute',
left: '50%',
WebkitTransform: 'translate3d(-50%, -' + backPos + 'px, 0)',
transform: 'translate3d(-50%, -' + backPos + 'px, 0)',
height: height,
width: width,
WebkitFilter: 'blur(' + this.props.blur + 'px)',
filter: 'blur(' + this.props.blur + 'px)'
width: width
};
if (this.props.blur) {
style.WebkitFilter = 'blur(' + this.props.blur + 'px)';
style.filter = 'blur(' + this.props.blur + 'px)';
}
return style;

@@ -144,11 +170,10 @@ }

/**
* returns general styles for the component
* defines styles for the parallax node that do not change during use
*/
getParallaxStyle() {
let style = {
position: 'relative',
background: this.props.bgColor,
overflow: 'hidden'
};
return style;
setParallaxStyle() {
if (this.node) {
this.node.style.position = 'relative';
this.node.style.overflow = 'hidden';
this.node.style.background = this.props.bgColor;
}
}

@@ -174,2 +199,10 @@

isScrolledIntoView(element) {
let elementTop = element.getBoundingClientRect().top,
elementBottom = element.getBoundingClientRect().bottom;
return elementTop <= 0 && elementBottom >= 0 ||
elementTop >= 0 && elementBottom <= window.innerHeight ||
elementTop <= window.innerHeight && elementBottom >= window.innerHeight;
}
log() {

@@ -176,0 +209,0 @@ if (this.props.log) {

53

src/KitchenSink.jsx

@@ -27,46 +27,35 @@ import React from 'react';

<div style={style}>
<Parallax bgImage="assets/3.jpg" strength={300}>
<Parallax bgImage="assets/1.jpg" strength={300}>
<br/><br/><br/><br/>
<h1 style={fontStyle}>first parallax</h1>
<br/>
<h1 style={fontStyle}>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops</h1>
<br/>
<br/><br/><br/><br/>
<img src="http://www.fillmurray.com/400/400" alt="fill murray"/>
<h1 style={fontStyle}>...</h1>
<h1 style={fontStyle}>some content</h1>
<br/>
<img src="http://www.fillmurray.com/100/300" alt="fill murray"/>
<img src="http://www.fillmurray.com/400/300" alt="fill murray"/>
<h1 style={fontStyle}>more and more content</h1>
<h1 style={fontStyle}>...</h1>
<br/>
<h2 style={fontStyle}>filled with murray</h2>
<br/>
</Parallax>
<div>
<Parallax bgImage="assets/2.jpg" strength={300}>
<br/><br/><br/><br/>
<h1 style={fontStyle}>none-parallax content</h1>
<br/>
<h2 style={fontStyle}>-------------</h2>
<h2 style={fontStyle}>because we can</h2>
<br/><br/><br/><br/>
</div>
<Parallax bgImage="assets/2.jpg" blur={3} disabled={true} log={true}>
<br/><br/><br/><br/>
<h1 style={fontStyle}>second one!!</h1>
<h1 style={fontStyle}>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops</h1>
<h1 style={fontStyle}>...</h1>
<br/>
<img src="http://www.fillmurray.com/200/300" alt="fill murray"/>
<img src="http://www.fillmurray.com/100/300" alt="fill murray"/>
<h1 style={fontStyle}>...</h1>
<h1 style={fontStyle}>...</h1>
<h1 style={fontStyle}>...</h1>
<h1 style={fontStyle}>...</h1>
<h1 style={fontStyle}>...</h1>
<h1 style={fontStyle}>...</h1>
<img src="http://www.fillmurray.com/300/300" alt="fill murray"/>
<img src="http://www.fillmurray.com/200/300" alt="fill murray"/>
<br/>
<h2 style={fontStyle}>it's also filled</h2>
<br/><br/>
<img src="http://www.fillmurray.com/g/500/400" alt="fillmurray"/>
<br/><br/>
</Parallax>
<Parallax bgColor="darkgrey">
<br/><br/><br/><br/>
<h1 style={fontStyle}>guess</h1>
<h1 style={fontStyle}>what?</h1>
<br/><br/><br/><br/>
</Parallax>
<Parallax bgImage="assets/1.jpg">
<br/><br/><br/><br/>
<h1 style={fontStyle}>last one...</h1>
<br/>
<br/>
<img src="http://www.fillmurray.com/g/600/500" alt="fillmurray"/>
<br/><br/><br/><br/>
</Parallax>

@@ -73,0 +62,0 @@ </div>

src/assets/1.jpg

Sorry, the diff of this file is not supported yet

src/assets/2.jpg

Sorry, the diff of this file is not supported yet

src/assets/3.jpg

Sorry, the diff of this file is not supported yet