Initial commit (Now with npm installation)

.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        "react",
+        "env",
+        "stage-0"
+    ]
+}

.gitignore

@@ -0,0 +1,2 @@
+lib
+node_modules

.npmignore

@@ -0,0 +1,4 @@
+src
+demo
+.babelrc
+webpack.config.js

README.md

@@ -0,0 +1,29 @@
+# Introduction
+
+> This is a module extends **React**
+
+This FancyImage React component creates an animation on image change and can be used as nice and material headline design with image.
+
+# Installation
+
+`npm install react-fancy-image` --save
+
+# Usage
+
+Add following line at the beginning of your document:
+
+`import ReactFancyImage from 'react-fancy-image'`
+
+Use the ReactFancyImage component:
+
+`<Image img={require(imgUrl)} headlineA="" headlineB="" />`
+
+> The image is displayed 'absolute'. To embed it into your website it is recommended to use a parent `<div style={position: "relative"}>`.
+
+# Contact
+
+**Github:** https://github.com/aleabodo
+
+**Wesite:** https://alexbell.de
+
+**Email:** mail@alexbell.de

package.json

@@ -0,0 +1,30 @@
+{
+    "name": "react-fancy-image",
+    "version": "1.0.2",
+    "description": "React image component with transitions and animations by image change",
+    "main": "./lib/index.js",
+    "license": "MIT",
+    "scripts": {
+        "build": "webpack"
+    },
+    "peerDependencies": {
+        "prop-types": "^15.6.0",
+        "react": "^16.0.0",
+        "react-dom": "^16.0.0",
+        "react-scripts": "1.1.4"
+    },
+    "devDependencies": {
+        "babel-core": "^6.21.0",
+        "babel-loader": "^7.1.4",
+        "babel-preset-env": "^1.6.1",
+        "babel-preset-react": "^6.16.0",
+        "babel-preset-stage-0": "^6.24.1",
+        "path": "^0.12.7",
+        "prop-types": "^15.6.0",
+        "react": "^16.0.0",
+        "react-dom": "^16.0.0",
+        "react-scripts": "1.1.4",
+        "webpack": "^4.5.0",
+        "webpack-cli": "^2.0.14"
+    }
+}

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;

webpack.config.js

@@ -0,0 +1,24 @@
+var path = require('path');
+
+module.exports = {
+    mode: 'production',
+    entry: './src/Image.jsx',
+    output: {
+        path: path.resolve('lib'),
+        filename: 'index.js',
+        libraryTarget: 'commonjs2'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.jsx?$/,
+                exclude: /(node_modules)/,
+                use: 'babel-loader'
+            },
+            {
+              test: /\.css$/,
+              use: [ 'style-loader', 'css-loader' ]
+            }
+        ]
+    }
+}