135 lines
4.2 KiB
JavaScript
135 lines
4.2 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import './Image.css';
|
|
|
|
|
|
class Image extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
/*
|
|
* Expected props:
|
|
* - img: require(imgUrl)
|
|
* - headlineA: String
|
|
* - headlineB: String
|
|
*/
|
|
this.currentImageIs_A = true;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.fadeIn("a");
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
const fadeInLetter = this.currentImageIs_A ? "b" : "a";
|
|
const fadeOutLetter = this.currentImageIs_A ? "a" : "b";
|
|
this.fadeIn(fadeInLetter, this.props.img);
|
|
this.fadeOut(fadeOutLetter);
|
|
this.currentImageIs_A = !this.currentImageIs_A;
|
|
}
|
|
|
|
|
|
fadeIn(letter) {
|
|
/*
|
|
* Fade in
|
|
*/
|
|
//Image
|
|
const elements = document.getElementById(letter).getElementsByClassName("Image_element");
|
|
for (var i = 0; i < elements.length; i++) {
|
|
const element = elements[i];
|
|
//Change picture
|
|
const imgUrl = this.props.img;
|
|
element.style.backgroundImage = "url(" + imgUrl + ")";
|
|
//Animation
|
|
this.timeout_fadeIn(element,i);
|
|
};
|
|
}
|
|
|
|
fadeOut(letter) {
|
|
/*
|
|
* Fade out
|
|
*/
|
|
//Image
|
|
const elements = document.getElementById(letter).getElementsByClassName("Image_element");
|
|
for (var i = 0; i < elements.length; i++) {
|
|
const element = elements[i];
|
|
//Animation
|
|
this.timeout_fadeOut(element,i);
|
|
};
|
|
}
|
|
|
|
timeout_fadeIn(element,i) {
|
|
setTimeout(function() {
|
|
element.classList.remove("Image_element-fade-out");
|
|
element.classList.add("Image_element-fade-in");
|
|
}, i*100);
|
|
}
|
|
|
|
timeout_fadeOut(element,i) {
|
|
setTimeout(function() {
|
|
element.classList.remove("Image_element-fade-in");
|
|
element.classList.add("Image_element-fade-out");
|
|
}, i*100);
|
|
}
|
|
|
|
|
|
render() {
|
|
if(this.props.img !== null) {
|
|
//displayed
|
|
return (
|
|
<div>
|
|
<div className="Image" id="a">
|
|
<h1 className="Image_headline Image_headline-1 Image_headline-black Image_headline-bright">
|
|
{this.props.headlineA}
|
|
</h1>
|
|
<h2 className="Image_headline Image_headline-2 Image_headline-black Image_headline-bright">
|
|
{this.props.headlineB}
|
|
</h2>
|
|
<div className="Image_element-1 Image_element"></div>
|
|
<div className="Image_element-2 Image_element"></div>
|
|
<div className="Image_element-3 Image_element"></div>
|
|
<div className="Image_element-4 Image_element"></div>
|
|
<div className="Image_element-5 Image_element"></div>
|
|
<div className="Image_element-6 Image_element"></div>
|
|
<div className="Image_element-7 Image_element"></div>
|
|
|
|
<div className="Image_element-8 Image_element"></div>
|
|
|
|
<div className="Image_element-9 Image_element"></div>
|
|
<div className="Image_element-10 Image_element"></div>
|
|
<div className="Image_element-11 Image_element"></div>
|
|
<div className="Image_element-12 Image_element"></div>
|
|
<div className="Image_element-13 Image_element"></div>
|
|
<div className="Image_element-14 Image_element"></div>
|
|
</div>
|
|
<div className="Image" id="b">
|
|
<div className="Image_element-1 Image_element"></div>
|
|
<div className="Image_element-2 Image_element"></div>
|
|
<div className="Image_element-3 Image_element"></div>
|
|
<div className="Image_element-4 Image_element"></div>
|
|
<div className="Image_element-5 Image_element"></div>
|
|
<div className="Image_element-6 Image_element"></div>
|
|
<div className="Image_element-7 Image_element"></div>
|
|
|
|
<div className="Image_element-8 Image_element"></div>
|
|
|
|
<div className="Image_element-9 Image_element"></div>
|
|
<div className="Image_element-10 Image_element"></div>
|
|
<div className="Image_element-11 Image_element"></div>
|
|
<div className="Image_element-12 Image_element"></div>
|
|
<div className="Image_element-13 Image_element"></div>
|
|
<div className="Image_element-14 Image_element"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} else {
|
|
//not displayed
|
|
return (
|
|
null
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Image;
|