Initial commit (Now with npm installation)

src/Image.css

@@ -0,0 +1,207 @@
+.Image h1{
+  left: -8%;
+  top: 10%;
+  position: absolute;
+}
+.Image h2{
+  left: 10%;
+  top: 30%;
+  width: 70%;
+  padding-bottom: 10px;
+  letter-spacing: 2px;
+  font-size: 1.3em;
+  font-family: sans-serif;
+  padding-left: 0.3em;
+  position: absolute;
+}
+
+.Image {
+  width: 600px;
+  height: 300px;
+  background-color: transparent;
+
+  position: absolute;
+}
+
+.Image_element {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: top left;
+  opacity: 0;
+}
+
+.Image_element.Image_element-fade-out {
+  animation: fade-out 0.7s;
+  transform: translate(100px,100px);
+  -webkit-transform: translate(100px,100px);
+  opacity: 0 !important;
+}
+
+.Image_element.Image_element-fade-in {
+  animation: fade-in 0.7s;
+  transform: translate(0px,0px);
+  -webkit-transform: translate(0px,0px);
+  opacity: 1 !important;
+}
+
+
+/*
+* Fade animations
+*/
+@keyframes fade-in {
+  0% {
+    transform: translate(-150px,150px);
+    -webkit-transform: translate(-150px,150px);
+    opacity: 0;
+  },
+  80% {
+    transform: translate(0px,0px);
+    -webkit-transform: translate(0px,0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0px,0px);
+    -webkit-transform: translate(0px,0px);
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    transform: translate(0px,0px);
+    -webkit-transform: translate(0px,0px);
+    opacity: 1;
+  },
+  80% {
+    transform: translate(100px,100px);
+    -webkit-transform: translate(100px,-100px);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(100px,-100px);
+    -webkit-transform: translate(100px,-100px);
+    opacity: 0;
+  }
+}
+
+
+/*
+* elements
+*/
+.Image_element-1 {
+  -webkit-clip-path: polygon(0% 0%, 10% 0%, 0% 10%);
+  clip-path: polygon(0% 0%, 10% 0%, 0% 10%);
+}
+
+.Image_element-2 {
+  -webkit-clip-path: polygon(0% 10%, 10% 0%, 23% 0%, 0% 23%);
+  clip-path: polygon(0% 10%, 10% 0%, 23% 0%, 0% 23%);
+}
+
+.Image_element-3 {
+  -webkit-clip-path: polygon(0% 23%, 23% 0%, 40% 0%, 0% 40%);
+  clip-path: polygon(0% 23%, 23% 0%, 40% 0%, 0% 40%);
+}
+
+.Image_element-4 {
+  -webkit-clip-path: polygon(0% 40%, 40% 0%, 50% 0%, 0% 50%);
+  clip-path: polygon(0% 40%, 40% 0%, 50% 0%, 0% 50%);
+}
+
+.Image_element-5 {
+  -webkit-clip-path: polygon(0% 50%, 50% 0%, 75% 0%, 0% 75%);
+  clip-path: polygon(0% 50%, 50% 0%, 75% 0%, 0% 75%);
+}
+
+.Image_element-6 {
+  -webkit-clip-path: polygon(0% 75%, 75% 0%, 80% 0%, 0% 80%);
+  clip-path: polygon(0% 75%, 75% 0%, 80% 0%, 0% 80%);
+}
+
+.Image_element-7 {
+  -webkit-clip-path: polygon(0% 80%, 80% 0%, 90% 0%, 0% 90%);
+  clip-path: polygon(0% 80%, 80% 0%, 90% 0%, 0% 90%);
+}
+
+.Image_element-8 {
+  -webkit-clip-path: polygon(0% 90%, 90% 0%, 100% 0%, 100% 5%, 5% 100%, 0% 100%);
+  clip-path: polygon(0% 90%, 90% 0%, 100% 0%, 100% 5%, 5% 100%, 0% 100%);
+}
+
+.Image_element-9 {
+  -webkit-clip-path: polygon(5% 100%, 100% 5%, 100% 10%, 10% 100%);
+  clip-path: polygon(5% 100%, 100% 5%, 100% 10%, 10% 100%);
+}
+
+.Image_element-10 {
+  -webkit-clip-path: polygon(10% 100%, 100% 10%, 100% 30%, 30% 100%);
+  clip-path: polygon(10% 100%, 100% 10%, 100% 30%, 30% 100%);
+}
+
+.Image_element-11 {
+  -webkit-clip-path: polygon(30% 100%, 100% 30%, 100% 50%, 50% 100%);
+  clip-path: polygon(30% 100%, 100% 30%, 100% 50%, 50% 100%);
+}
+
+.Image_element-12 {
+  -webkit-clip-path: polygon(50% 100%, 100% 50%, 100% 60%, 60% 100%);
+  clip-path: polygon(50% 100%, 100% 50%, 100% 60%, 60% 100%);
+}
+
+.Image_element-13 {
+  -webkit-clip-path: polygon(60% 100%, 100% 60%, 100% 80%, 80% 100%);
+  clip-path: polygon(60% 100%, 100% 60%, 100% 80%, 80% 100%);
+}
+
+.Image_element-14 {
+  -webkit-clip-path: polygon(80% 100%, 100% 80%, 100% 100%, 100% 100%);
+  clip-path: polygon(80% 100%, 100% 80%, 100% 100%, 100% 100%);
+}
+
+
+/*
+* Headlines
+*/
+.Image_headline {
+  text-align: left !important;
+  width: 70%;
+  padding: 10px;
+  letter-spacing: 10px;
+  display: block;
+  z-index: 1;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  padding-left: 20px !important;
+}
+
+.Image_headline-1 {
+  font-size: 1.7em;
+}
+
+.Image_headline-2 {
+  font-size: 1.5em;
+}
+
+.Image_headline-3 {
+  font-size: 1.3em;
+}
+
+.Image_headline-black {
+  background-color: black;
+}
+.Image_headline-black::first-letter {
+  color: #E45F4D;
+  font-weight: bold;
+}
+
+.Image_headline-bright {
+  color: rgb(228, 228, 228) !important;
+}
+
+.Image_headline-dark {
+  color: rgb(45, 45, 45) !important;
+}

src/Image.jsx

@@ -0,0 +1,134 @@
+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;