start new parallax example

Author: jscottsmith

examples/client.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import HelloWorld from './components/HelloWorld';
+import { ParallaxExample } from 'components';
 
 import 'react-scroll-parallax/libs/ParallaxScrollListener';
 
 const root = document.getElementById('root');
 
-ReactDOM.render(<HelloWorld />, root);
+ReactDOM.render(<ParallaxExample />, root);

examples/components/HelloWorld.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import style from './Intro.scss';
+import { Svg } from 'components';
+import { Parallax } from 'react-scroll-parallax';
+import ring from '!!raw-loader!./ring-of-dots.svg';
+import hemispheres from '!!raw-loader!./hemispheres.svg';
+
+const Intro = () => (
+    <div className={style.root}>
+        <div className={style.container}>
+            <Parallax
+                offsetYMin={-100}
+                offsetYMax={100}
+                className={style.ring}
+            >
+                <Svg svg={ring} />
+            </Parallax>
+            <Parallax
+                offsetYMin={-50}
+                offsetYMax={50}
+                className={style.circle}
+            >
+                <div />
+            </Parallax>
+            <Svg
+                className={style.hemispheres}
+                svg={hemispheres}
+            />
+        </div>
+    </div>
+);
+
+export default Intro;

examples/components/Intro/Intro.js

@@ -0,0 +1,50 @@
+//
+// Intro
+// ---------------------------
+
+@import '../../styles/colors';
+
+:local(.root) {
+	display: flex;
+	flex-flow: row wrap;
+	align-items: center;
+	justify-content: center;
+	padding-top: 50vh;
+	height: 50vh;
+}
+
+:local(.container) {
+	position: relative;
+	width: 25em;
+}
+
+:local(.ring) {
+	position: relative;
+	z-index: 2;
+}
+
+:local(.circle) {
+	position: absolute;
+	top: 15%;
+	left: 15%;
+	width: 70%;
+	height: 70%;
+	z-index: 1;
+	
+	div {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border: 3px solid $plum;
+		border-radius: 50%;
+	}
+}
+
+:local(.hemispheres) {
+	position: absolute;
+	top: 25%;
+	left: 25%;
+	width: 50%;
+}