add additional example parallax-test

Author: jscottsmith

examples/parallax-test/client.js

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

examples/parallax-test/components/ParallaxTest/ParallaxTest.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Parallax } from 'react-scroll-parallax';
+import style from './ParallaxTest.scss';
+
+export default class ParallaxTest extends React.Component {
+
+    state = {
+        amount: [1],
+        offset: 50,
+        slowerScrollRate: true,
+    };
+
+    mapToParallax() {
+        const offset = this.state.offset;
+        const slowerScrollRate = this.state.slowerScrollRate;
+
+        return this.state.amount.map((number, i) => {
+            const offsetYMin = offset * -1 * i;
+            const offsetYMax = offset * i;
+            // console.log('min', offsetYMin, 'max', offsetYMax, 'slowerScrollRate', slowerScrollRate);
+            return (
+                <Parallax
+                    key={i}
+                    tag="span"
+                    disabled={false}
+                    offsetYMax={offset * i + 'px'}
+                    offsetYMin={offset * -1 * i + 'px'}
+                    offsetXMax={0}
+                    offsetXMin={0}
+                    className="image"
+                    slowerScrollRate={slowerScrollRate}
+                >
+                    {number}
+                </Parallax>
+            )
+        });
+    }
+
+    handleAdd = () => {
+        const amount = [...this.state.amount, this.state.amount.length + 1];
+        this.setState({
+            amount,
+        });
+    };
+
+    handleRemove = () => {
+        const amount = this.state.amount.slice(0, this.state.amount.length - 1);
+        this.setState({
+            amount,
+        });
+    };
+
+    increaseOffset = () => {
+        const offset = this.state.offset + 50;
+        // console.log('increase', offset);
+        this.setState({
+            offset,
+        });
+    };
+
+    decreaseOffset = () => {
+        const offset = this.state.offset - 50 < 0 ? 0 : this.state.offset - 50;
+        // console.log('decrease', offset);
+        this.setState({
+            offset,
+        });
+    };
+
+    toggleSpeed = () => {
+        const slowerScrollRate = !this.state.slowerScrollRate;
+        // console.log('slower scroll rate', slowerScrollRate);
+        this.setState({
+            slowerScrollRate,
+        });
+    };
+
+    render() {
+        return (
+            <div className="hello-world">
+                <h1>
+                    {this.mapToParallax()}
+                </h1>
+                <div className="buttons">
+                    <button onClick={this.handleAdd}>Add</button>
+                    <button onClick={this.handleRemove}>Remove</button>
+                    <button onClick={this.increaseOffset}>Increase</button>
+                    <button onClick={this.decreaseOffset}>Decrease</button>
+                    <button onClick={this.toggleSpeed}>{this.state.slowerScrollRate ? 'Faster' : 'Slower'}</button>
+                </div>
+            </div>
+        );
+    }
+}

examples/parallax-test/components/ParallaxTest/ParallaxTest.scss

@@ -0,0 +1,101 @@
+:global {
+    body {
+        background-color: #222;
+        background-image: 
+            linear-gradient(0deg, 
+                    transparent 24%, 
+                    #333 25%, 
+                    #333 26%, 
+                    transparent 27%,
+                    transparent 74%, 
+                    #333 75%, 
+                    #333 76%,
+                    transparent 77%,
+                    transparent), 
+            linear-gradient(90deg, transparent 24%, 
+                    #333 25%, 
+                    #333 26%,
+                    transparent 27%,
+                    transparent 74%, 
+                    #333 75%, 
+                    #333 76%,
+                    transparent 77%,
+                    transparent);
+
+        background-size: 50px 50px;
+        color: #342A45;
+        font-family: 'Roboto Mono', sans-serif;
+        font-style: normal;
+        color: #eee;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    .hello-world {
+        margin: 100vh 0;
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        height: 300vh;
+    }
+
+    h1 {
+        width: 100%;
+        font-size: 10vw;
+        text-align: center;
+    }
+
+    h1 > span {
+        position: relative;
+        display: inline-block;
+        width: auto;
+    }
+
+    .parallax-outer {
+        position: relative;
+        will-change: transform;
+    }
+
+    .parallax-inner {
+        position: relative;
+        will-change: transform;
+        background-color: rgba(255, 0, 0, 0.3);
+    }
+
+    .parallax-outer::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: 2px solid orangered;
+    }
+
+    .is-in-view .parallax-inner {
+        background-color: rgba(0, 255, 0, 0.3);
+    }
+
+    .parallax-inner::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: 2px solid green;
+    }
+
+    .test {
+        height: 400vh;
+    }
+
+    .buttons {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+}

examples/parallax-test/components/index.js

@@ -0,0 +1 @@
+export ParallaxTest from './ParallaxTest/ParallaxTest.js';

examples/parallax-test/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example: React Scroll Parallax</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:700" rel="stylesheet">
+</head>
+<body>
+    <div id="root">$react</div>
+    <script src="/static/bundle.js"></script>
+</body>
+</html>

examples/parallax-test/server.js

@@ -0,0 +1,22 @@
+import path from 'path';
+import fs from 'fs';
+import express from 'express';
+
+import React from 'react';
+import ReactServer from 'react-dom/server';
+import { ParallaxTest } from 'components';
+
+const app = express();
+
+app.use('/static', express.static(path.resolve(__dirname, './dist')));
+
+app.get('*', (req, res) => {
+    const html = fs.readFileSync(path.resolve(__dirname, './index.html')).toString();
+    const markup = ReactServer.renderToString(<ParallaxTest />);
+
+    res.send(html.replace('$react', markup));
+});
+
+app.listen(3000, () => {
+    console.log('Listening on: http://localhost:3000');
+});