Merge pull request #4 from jscottsmith/update-examples

feat: update parallax-example

Author: jscottsmith

.babelrc

@@ -1,3 +1,4 @@
 node_modules
-*dist
 npm-debug.log
+.parcel-cache
+.DS_Store

.editorconfig

@@ -0,0 +1,13 @@
+# Parallax Example Site
+
+The original example site using `react-scroll-parallax` upgraded to version 3.
+
+🔗 [View Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/dist/)
+
+- Made with [react-scroll-parallax v3](https://github.com/jscottsmith/react-scroll-parallax)
+- Now with better [documentation](https://react-scroll-parallax.damnthat.tv)
+- Check it out [on NPM](https://www.npmjs.com/package/react-scroll-parallax)
+
+## Dev
+
+Packed with [parcel](https://parceljs.org/). Use `yarn start` to run locally.

.eslintrc

@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
-import { ParallaxProvider } from 'react-scroll-parallax';
-import { ParallaxExample } from 'components';
+import React, { Component } from "react";
+import { ParallaxProvider } from "react-scroll-parallax";
+import { ParallaxExample } from "../";
 
 export default class App extends Component {
-    render() {
-        return (
-            <ParallaxProvider>
-                <ParallaxExample />
-            </ParallaxProvider>
-        );
-    }
+  render() {
+    return (
+      <ParallaxProvider>
+        <ParallaxExample />
+      </ParallaxProvider>
+    );
+  }
 }

.gitignore

@@ -1,34 +1,25 @@
-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';
+import React from "react";
+import { Parallax } from "react-scroll-parallax";
+import * as style from "./Intro.module.scss";
+import { Svg } from "../";
+import ring from "bundle-text:./ring-of-dots.svg";
+import hemispheres from "bundle-text:./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 className={style.circleInner}/>
-            </Parallax>
-            <Svg
-                className={style.hemispheres}
-                svg={hemispheres}
-            />
+  <div className={style.root}>
+    <div className={style.container}>
+      <Parallax translateY={[100, -100]} className={style.ring}>
+        <Svg svg={ring} />
+      </Parallax>
+      <Parallax translateY={[50, -50]} className={style.circle}>
+        <div className={style.parallaxInner}>
+          <div className={style.circleInner} />
         </div>
-        <p className={style.scroll}>Scroll</p>
+      </Parallax>
+      <Svg className={style.hemispheres} svg={hemispheres} />
     </div>
+    <p className={style.scroll}>Scroll</p>
+  </div>
 );
 
 export default Intro;