76 lines
1.4 KiB
JavaScript
Executable File
76 lines
1.4 KiB
JavaScript
Executable File
|
|
import React, { PropTypes } from 'react'
|
|
|
|
export default class Parallax extends React.Component{
|
|
|
|
constructor(props){
|
|
super(props);
|
|
|
|
this.state = {
|
|
loaded: false,
|
|
url: null
|
|
}
|
|
}
|
|
|
|
componentWillMount(){
|
|
if (this.props.image){
|
|
this.loadImage(this.props.image);
|
|
}
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps){
|
|
if (nextProps.image != this.state.url){
|
|
this.loadImage(nextProps.image);
|
|
}
|
|
}
|
|
|
|
loadImage(url){
|
|
|
|
// Reset our image to nothing
|
|
// This is needed when navigating to new view, but not unmounting the current components
|
|
// ie one artist to another
|
|
this.setState({
|
|
loaded: false,
|
|
url: null
|
|
});
|
|
|
|
var self = this;
|
|
var imageObject = new Image();
|
|
imageObject.src = url;
|
|
|
|
imageObject.onload = function(){
|
|
self.setState({
|
|
loaded: true,
|
|
url: url
|
|
});
|
|
}
|
|
}
|
|
|
|
render(){
|
|
var class_name = "parallax preserve-3d";
|
|
if (this.props.blur){
|
|
class_name += " parallax--blur";
|
|
}
|
|
if (this.state.loaded){
|
|
class_name += " parallax--loaded";
|
|
}
|
|
|
|
var style = {};
|
|
if (this.state.loaded && this.state.url){
|
|
style = {backgroundImage: 'url('+this.state.url+')'};
|
|
}
|
|
|
|
return (
|
|
<div className={class_name}>
|
|
<div className="parallax__inner preserve-3d">
|
|
<div className="parallax__image" style={style}></div>
|
|
<div className="parallax__overlay"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
|