Merge pull request reactbkk#83 from zapkub/feature/css-crossfade-images

💄 Add crossfade effect on Hero images reactbkk#1

.gitignore

@@ -1,4 +1,4 @@
-
+.vscode
 # created by git-ignore
 # Logs
 logs

components/HeroUnit.js

@@ -1,13 +1,15 @@
 import DownArrowIcon from '../resources/down-arrow-icon.svg'
 import NavigationBar from './NavigationBar'
 import ReactBKKLogo from './ReactBKKLogo'
+import SimpleCrossfadeImages from './SimpleCrossfadeImages'
 import Scroll from 'react-scroll'
 
 var Link = Scroll.Link
 
 export default function HeroUnit () {
   return (
     <header>
+      <SimpleCrossfadeImages />
       <div className='bg-overlay' />
       <div className='spacer' />
       <div className='center'>

components/SimpleCrossfadeImages.js

@@ -0,0 +1,53 @@
+// Simple crossfade images
+// credit: http://css3.bradshawenterprises.com/cfimg/
+
+const images = [
+  'static/hero-bg.jpg',
+  'static/hero-bg-2.jpg',
+  'static/hero-bg-3.jpg'
+]
+
+export default () => (
+  <div className='container'>
+    {images.map(image => {
+      return <div key={image} className='image' style={{ backgroundImage: `url(${image})` }} />
+    })}
+    <style jsx>{`
+      .container {
+        top: 0;
+        left:0;
+        bottom:0;
+        overflow:hidden;
+        right:0;
+        position: absolute;
+      }
+      .image {
+        top: 0;
+        left:0;
+        bottom:0;
+        right:0;
+        background-size: cover;
+        background-position: center center;
+        position: absolute;
+        animation: SimpleCrossfade 12s linear infinite 0s;
+        transform-origin: center;
+      }
+      @keyframes SimpleCrossfade {
+        0% { opacity:1; transform: scale(1); }
+        25% { opacity:1; }
+        33.3333% { opacity:0; transform: scale(1.05); }
+        50% { transform: scale(1); }
+        91.66667% { opacity: 0; }
+        100% { opacity:1;  }
+      }
+      .image:nth-of-type(1) {
+        animation-delay: 7s;
+      }
+      .image:nth-of-type(2) {
+        animation-delay: 3s;
+      }
+      .image:nth-of-type(3) {
+        animation-delay: -1s;
+      }
+    `}</style>
+  </div>)