Animate parallax on load; Experimental Link scrolls to top

src/js/components/Parallax.js

@@ -5,6 +5,36 @@ export default class Parallax extends React.Component{
 
 	constructor(props){
 		super(props);
+
+		this.state = {
+			loaded: false,
+			url: ''
+		}
+	}
+
+	componentWillMount(){
+		if (this.props.image){
+			this.loadImage(this.props.image);
+		}
+	}
+
+	componentWillReceiveProps(nextProps){
+		if ((!this.state.url || nextProps.image != this.state.url ) && nextProps.image){
+			this.loadImage(nextProps.image);
+		}
+	}
+
+	loadImage(url){
+		var self = this;
+		var imageObject = new Image();
+		imageObject.src = url;
+
+		imageObject.onload = function(){
+			self.setState({
+				loaded: true,
+				url: url
+			});
+		}
 	}
 
 	render(){
@@ -12,10 +42,13 @@ export default class Parallax extends React.Component{
 		if (this.props.blur){
 			class_name += " parallax--blur";
 		}
+		if (this.state.loaded){
+			class_name += " parallax--loaded";
+		}
 
 		return (
 			<div className={class_name}>
-				<div className="parallax__image" style={{backgroundImage: 'url('+this.props.image+')'}}></div>
+				<div className="parallax__image" style={{backgroundImage: 'url('+this.state.url+')'}}></div>
 				<div className="parallax__overlay"></div>
 			</div>
 		);