Repository: jscottsmith/react-scroll-parallax-examples
Branch: master
Commit: 586376716de8
Files: 70
Total size: 49.2 KB

Directory structure:
gitextract_t3b1adyy/

├── .github/
│   └── workflows/
│       ├── horizontal-scroll.yml
│       ├── mountains.yml
│       └── space-worms.yml
├── .gitignore
├── README.md
├── horizontal-scroll/
│   ├── README.md
│   ├── components/
│   │   ├── App/
│   │   │   └── App.js
│   │   ├── ParallaxExample/
│   │   │   ├── ParallaExample.module.scss
│   │   │   └── ParallaxExample.js
│   │   └── index.js
│   ├── index.css
│   ├── index.html
│   ├── index.js
│   ├── package.json
│   └── styles/
│       └── colors.scss
├── mountains/
│   ├── README.md
│   ├── components/
│   │   ├── App/
│   │   │   └── App.js
│   │   └── index.js
│   ├── index.css
│   ├── index.html
│   ├── index.js
│   └── package.json
├── original/
│   ├── .nvmrc
│   ├── .parcelrc
│   ├── README.md
│   ├── components/
│   │   ├── App/
│   │   │   └── App.js
│   │   ├── Intro/
│   │   │   ├── Intro.js
│   │   │   └── Intro.module.scss
│   │   ├── IntroCopy/
│   │   │   ├── IntroCopy.js
│   │   │   └── IntroCopy.module.scss
│   │   ├── Marquee/
│   │   │   ├── Marquee.js
│   │   │   └── Marquee.module.scss
│   │   ├── Overlap/
│   │   │   ├── Overlap.js
│   │   │   └── Overlap.module.scss
│   │   ├── ParallaxExample/
│   │   │   ├── ParallaExample.module.scss
│   │   │   └── ParallaxExample.js
│   │   ├── ShapeField/
│   │   │   ├── ShapeField.js
│   │   │   └── ShapeField.module.scss
│   │   ├── Svg/
│   │   │   ├── Svg.js
│   │   │   └── Svg.module.scss
│   │   ├── TriangleGrid/
│   │   │   ├── TriangleGrid.js
│   │   │   └── TriangleGrid.module.scss
│   │   └── index.js
│   ├── index.css
│   ├── index.html
│   ├── index.js
│   ├── package.json
│   ├── styles/
│   │   └── colors.scss
│   ├── svgo.config.js
│   └── vercel.json
├── space-worms/
│   ├── README.md
│   ├── components/
│   │   ├── App/
│   │   │   └── App.js
│   │   ├── ParallaxExample/
│   │   │   ├── ParallaExample.module.scss
│   │   │   └── ParallaxExample.js
│   │   ├── Spaceworms/
│   │   │   ├── index.jsx
│   │   │   └── index.module.scss
│   │   └── index.js
│   ├── index.css
│   ├── index.html
│   ├── index.js
│   └── package.json
└── test-offsets/
    ├── README.md
    ├── components/
    │   ├── App/
    │   │   └── App.js
    │   ├── ParallaxTest/
    │   │   ├── ParallaxTest.js
    │   │   └── ParallaxTest.module.scss
    │   └── index.js
    ├── index.css
    ├── index.html
    ├── index.js
    └── package.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/workflows/horizontal-scroll.yml
================================================
name: Deploy Horizontal Scroll

on: [push]

defaults:
  run:
    shell: bash
    working-directory: horizontal-scroll

jobs:
  build:
    runs-on: ubuntu-latest
    name: Deploying to surge

    strategy:
      matrix:
        node-version: [20.x]

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          fetch-depth: 2

      - name: Set up Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install dependencies
        run: yarn install

      - name: Build
        run: yarn build

      - name: Install Surge
        run: npm install --global surge

      - name: Surge deploy
        run: surge ./dist react-scroll-parallax-horizontal-scroll.surge.sh --token ${{ secrets.SURGE_TOKEN }}


================================================
FILE: .github/workflows/mountains.yml
================================================
name: Deploy Mountains

on: [push]

defaults:
  run:
    shell: bash
    working-directory: mountains

jobs:
  build:
    runs-on: ubuntu-latest
    name: Deploying to surge

    strategy:
      matrix:
        node-version: [20.x]

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          fetch-depth: 2

      - name: Set up Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install dependencies
        run: yarn install

      - name: Build
        run: yarn build

      - name: Install Surge
        run: npm install --global surge

      - name: Surge deploy
        run: surge ./dist react-scroll-parallax-mountains.surge.sh --token ${{ secrets.SURGE_TOKEN }}


================================================
FILE: .github/workflows/space-worms.yml
================================================
name: Deploy Spaceworms

on: [push]

defaults:
  run:
    shell: bash
    working-directory: space-worms

jobs:
  build:
    runs-on: ubuntu-latest
    name: Deploying to surge

    strategy:
      matrix:
        node-version: [20.x]

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          fetch-depth: 2

      - name: Set up Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install dependencies
        run: yarn install

      - name: Build
        run: yarn build

      - name: Install Surge
        run: npm install --global surge

      - name: Surge deploy
        run: surge ./dist react-scroll-parallax-space-worms.surge.sh --token ${{ secrets.SURGE_TOKEN }}


================================================
FILE: .gitignore
================================================
node_modules
npm-debug.log
.parcel-cache
.DS_Store
dist
yarn-error.log

================================================
FILE: README.md
================================================
# Parallax Examples

A collection of examples in React using [`react-scroll-parallax`](https://github.com/jscottsmith/react-scroll-parallax).

- [Documentation](https://react-scroll-parallax.damnthat.tv)
- [GitHub](https://github.com/jscottsmith/react-scroll-parallax)
- [NPM Package](https://www.npmjs.com/package/react-scroll-parallax)

## Examples

- [Example Site](https://react-scroll-parallax-examples.vercel.app/)
- [Horizontal Scroll](https://react-scroll-parallax-horizontal-scroll.surge.sh/)
- [Mountains](https://react-scroll-parallax-mountains.surge.sh/)
- [Parallax Testing](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-test/)
<!-- - TODO: work on perf [Spaceworms](https://react-scroll-parallax-space-worms.surge.sh/) -->


================================================
FILE: horizontal-scroll/README.md
================================================
# 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.


================================================
FILE: horizontal-scroll/components/App/App.js
================================================
import React, { Component } from "react";
import { ParallaxProvider } from "react-scroll-parallax";
import { ParallaxExample } from "../";

export default class App extends Component {
  render() {
    return (
      <ParallaxProvider scrollAxis="horizontal">
        <ParallaxExample />
      </ParallaxProvider>
    );
  }
}


================================================
FILE: horizontal-scroll/components/ParallaxExample/ParallaExample.module.scss
================================================
@import "../../styles/colors";

.root {
  position: relative;
  background-color: black;
  width: 300vw;
}

.artist {
  position: fixed;
  right: 10px;
  bottom: 10px;
  text-align: right;
  color: rgb(190, 102, 87);
  font-family: monospace;
  z-index: 10;
}

.layer {
  position: absolute;
  top: 0;
  bottom: 0;
  background-size: auto 100%;
  background-repeat: repeat-x;
  height: 100vh;
}


================================================
FILE: horizontal-scroll/components/ParallaxExample/ParallaxExample.js
================================================
import React, { useRef } from "react";
import { useParallax } from "react-scroll-parallax";
import imageBg from "../../image/parallax-demon-woods-bg.png";
import imageClose from "../../image/parallax-demon-woods-close-trees.png";
import imageMid from "../../image/parallax-demon-woods-mid-trees.png";
import imageFar from "../../image/parallax-demon-woods-far-trees.png";

import * as styles from "./ParallaExample.module.scss";

export default function ParallaxExample() {
  const target = useRef(null);

  const mid = useParallax({
    speed: 50,
    targetElement: target.current,
  });
  const close = useParallax({
    speed: 100,
    targetElement: target.current,
  });

  const midExtend = 50 * 5 * -1;
  const closeExtend = 100 * 5 * -1;

  return (
    <div>
      <a
        target="_blank"
        href="https://aethrall.itch.io/"
        className={styles.artist}
      >
        Art by Aethrall
      </a>
      <div className={styles.root} ref={target}>
        <div
          style={{ backgroundImage: `url(${imageBg})`, left: 0, right: 0 }}
          className={styles.layer}
        />
        <div
          style={{
            backgroundImage: `url(${imageFar})`,
            left: 0,
            right: 0,
          }}
          className={styles.layer}
        />
        <div
          style={{
            backgroundImage: `url(${imageMid})`,
            left: midExtend,
            right: midExtend,
          }}
          className={styles.layer}
          ref={mid.ref}
        />
        <div
          style={{
            backgroundImage: `url(${imageClose})`,
            left: closeExtend,
            right: closeExtend,
          }}
          className={styles.layer}
          ref={close.ref}
        />
      </div>
    </div>
  );
}


================================================
FILE: horizontal-scroll/components/index.js
================================================
import ParallaxExample from "./ParallaxExample/ParallaxExample";
import App from "./App/App";

export { ParallaxExample, App };


================================================
FILE: horizontal-scroll/index.css
================================================
.star {
  position: fixed;
  top: 1em;
  right: 1em;
}

body {
  margin: 0;
  padding: 0;
}


================================================
FILE: horizontal-scroll/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React Scroll Parallax</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="J Scott Smith" />
    <meta
      name="description"
      content="React components to create parallax scroll effects for banners, images or any other DOM elements."
    />

    <!-- <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> -->
    <meta
      property="og:description"
      content="React components to create parallax scroll effects for banners, images or any other DOM elements."
    />
    <meta property="og:title" content="React Scroll Parallax" />

    <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:300,500,700i"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="root"></div>
    <div class="star">
      <a
        class="github-button"
        href="https://github.com/jscottsmith/react-scroll-parallax"
        data-icon="octicon-star"
        aria-label="Star jscottsmith/react-scroll-parallax on GitHub"
        >Star</a
      >
    </div>
    <script type="module" src="/index.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>


================================================
FILE: horizontal-scroll/index.js
================================================
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App/App";

const root = document.getElementById("root");

ReactDOM.render(<App />, root);


================================================
FILE: horizontal-scroll/package.json
================================================
{
  "name": "horizontal-scroll",
  "version": "1.0.0",
  "author": "J Scott Smith",
  "license": "MIT",
  "scripts": {
    "start": "yarn parcel index.html",
    "build": "yarn parcel build index.html"
  },
  "devDependencies": {
    "@parcel/transformer-inline-string": "^2.16.4",
    "@parcel/transformer-sass": "^2.16.4",
    "gh-pages": "^3.2.3",
    "parcel": "^2.16.4"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scroll-parallax": "4.0.0-beta.1"
  }
}


================================================
FILE: horizontal-scroll/styles/colors.scss
================================================
$plum: #3d3547;
$purple: #a179af;
$tan: #edeaea;

================================================
FILE: mountains/README.md
================================================
# Parallax Example: Mountains


================================================
FILE: mountains/components/App/App.js
================================================
import React from "react";
import { ParallaxProvider } from "react-scroll-parallax";
import { ParallaxProvider, ParallaxBanner } from "react-scroll-parallax";

import bg1 from "../../image/bg-1.jpg";
import bg2 from "../../image/bg-2.png";
import bg3 from "../../image/bg-3.png";
import bg4 from "../../image/bg-4.png";
import bg5 from "../../image/bg-5.png";

import "../../index.css";

export default function App() {
  return (
    <main>
      <ParallaxProvider>
        <header>
          <ParallaxBanner
            className="banner"
            layers={[
              {
                image: bg1,
                translateY: [0, 50],
                shouldAlwaysCompleteAnimation: true,
                expanded: false,
              },
              {
                image: bg2,
                translateY: [5, 45],

                shouldAlwaysCompleteAnimation: true,
                expanded: false,
              },
              {
                image: bg3,
                translateY: [10, 30],

                shouldAlwaysCompleteAnimation: true,
                expanded: false,
              },
              {
                image: bg4,
                translateY: [15, 25],

                shouldAlwaysCompleteAnimation: true,
                expanded: false,
              },
              {
                image: bg5,
                translateY: [20, 20],

                shouldAlwaysCompleteAnimation: true,
                expanded: false,
              },
            ]}
          />
        </header>
      </ParallaxProvider>
    </main>
  );
}


================================================
FILE: mountains/components/index.js
================================================
import ParallaxExample from "./ParallaxExample/ParallaxExample";
import App from "./App/App";

export { ParallaxExample, App };


================================================
FILE: mountains/index.css
================================================
.star {
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 999;
}

html,
body {
  padding: 0;
  margin: 0;
  background: #40255b;
}

main {
  height: 300vh;
}

p {
  font-family: helvetica, sans-serif;
  color: #eee;
}

.banner {
  height: 100vh;
  background: #bbe8f6;
}


================================================
FILE: mountains/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mountains | React Scroll Parallax</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="J Scott Smith" />
    <meta
      name="description"
      content="React components to create parallax scroll effects for banners, images or any other DOM elements."
    />

    <!-- <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> -->
    <meta
      property="og:description"
      content="React components to create parallax scroll effects for banners, images or any other DOM elements."
    />
    <meta property="og:title" content="React Scroll Parallax" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css"
    />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="root"></div>
    <div class="star">
      <a
        class="github-button"
        href="https://github.com/jscottsmith/react-scroll-parallax"
        data-icon="octicon-star"
        aria-label="Star jscottsmith/react-scroll-parallax on GitHub"
        >Star</a
      >
    </div>
    <script type="module" src="/index.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>


================================================
FILE: mountains/index.js
================================================
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App/App";

const root = document.getElementById("root");

ReactDOM.render(<App />, root);


================================================
FILE: mountains/package.json
================================================
{
  "name": "mountains",
  "version": "1.0.0",
  "author": "J Scott Smith",
  "license": "MIT",
  "scripts": {
    "start": "yarn parcel index.html",
    "build": "yarn parcel build index.html"
  },
  "devDependencies": {
    "@parcel/transformer-inline-string": "^2.16.4",
    "@parcel/transformer-sass": "^2.16.4",
    "gh-pages": "^3.2.3",
    "parcel": "^2.16.4"
  },
  "dependencies": {
    "classnames": "^2.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scroll-parallax": "4.0.0-beta.1"
  }
}


================================================
FILE: original/.nvmrc
================================================
20


================================================
FILE: original/.parcelrc
================================================
{
  "extends": "@parcel/config-default",
  "optimizers": {
    "*.svg": []
  }
}


================================================
FILE: original/README.md
================================================
# 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.


================================================
FILE: original/components/App/App.js
================================================
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>
    );
  }
}


================================================
FILE: original/components/Intro/Intro.js
================================================
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 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>
      </Parallax>
      <Svg className={style.hemispheres} svg={hemispheres} />
    </div>
    <p className={style.scroll}>Scroll</p>
  </div>
);

export default Intro;


================================================
FILE: original/components/Intro/Intro.module.scss
================================================
@import "../../styles/colors";

.root {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.scroll {
  position: absolute;
  bottom: 5em;
  left: 50%;
  transform: translateX(-50%);
  color: $plum;
  font-weight: 500;
}

.container {
  position: relative;
  width: 25em;
}

.ring {
  position: relative;
  z-index: 2;
}

.circle {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  z-index: 1;

  .parallaxInner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid $plum;
    border-radius: 50%;
  }
}

.circleInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid $plum;
  border-radius: 50%;
}

.hemispheres {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
}


================================================
FILE: original/components/IntroCopy/IntroCopy.js
================================================
import React from "react";
import * as style from "./IntroCopy.module.scss";
import { Parallax } from "react-scroll-parallax";

const copy = "Parallax".split("");

const IntroCopy = () => (
  <div className={style.root}>
    <div className={style.barTop} />
    <span className={`${style.copy} h1`}>
      {copy.map((letter, i) => (
        <Parallax
          key={`copy-${i}`}
          translateX={[0, 100 * (i - 3)]}
          className={style.letter}
        >
          {letter}
        </Parallax>
      ))}
    </span>
    <div className={style.barBottom} />
  </div>
);

export default IntroCopy;


================================================
FILE: original/components/IntroCopy/IntroCopy.module.scss
================================================
@import "../../styles/colors";

.root {
  display: flex;
  flex-flow: column wrap;
  align-items: space-around;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.copy {
  margin: 0.2em 0;
  text-align: center;
}

.barTop {
  margin-left: 0.8em;
  width: 20em;
  height: 1.5em;
  border-top: 0.45em solid $purple;
  border-bottom: 0.45em solid $purple;
  transform: skew(-10deg);
}

.barBottom {
  width: 20em;
  height: 1.5em;
  border-top: 0.45em solid $purple;
  border-bottom: 0.45em solid $purple;
  transform: skew(-10deg);
  margin-left: 0;
  margin-right: 0.8em;
}

.letter {
  display: inline-block;
}


================================================
FILE: original/components/Marquee/Marquee.js
================================================
import React from "react";
import * as style from "./Marquee.module.scss";
import { Svg } from "../";
import { Parallax } from "react-scroll-parallax";
import boxBg from "bundle-text:./box-bg.svg";
import boxOutline from "bundle-text:./box-outline.svg";
import divider from "bundle-text:../shared/divider.svg";

const Marquee = () => (
  <div className={style.root}>
    <Svg svg={divider} className={style.divider} />
    <div className={style.container}>
      <Svg svg={boxBg} className={style.boxBg} />
      <Parallax
        className={style.text}
        translateY={[-70, 70]}
        translateX={[30, -30]}
      >
        <span className="h1">Horizontal</span>
      </Parallax>
      <Parallax className={style.boxOutline} translateY={[-35, 35]}>
        <Svg svg={boxOutline} />
      </Parallax>
    </div>
  </div>
);

export default Marquee;


================================================
FILE: original/components/Marquee/Marquee.module.scss
================================================
//
// Marquee
// ---------------------------

@import "../../styles/colors";

.root {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  align-items: center;
  min-height: 50vh;
  margin-bottom: 50vh;
}

.divider {
  display: block;
  width: 100%;
  margin-top: 25vh;
  margin-bottom: 25vh;
}

.container {
  position: relative;
  width: 40em;
}

.boxOutline {
  position: absolute;
  top: 20%;
  right: 7%;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.boxBg {
  width: 100%;
}

.text {
  position: absolute;
  top: 28%;
  left: 0;
  width: 100%;
  text-align: center;
}


================================================
FILE: original/components/Overlap/Overlap.js
================================================
import React from "react";
import * as style from "./Overlap.module.scss";
import { Svg } from "..";
import { Parallax } from "react-scroll-parallax";
import circle from "bundle-text:./circle.svg";
import circleRings from "bundle-text:./circle-rings.svg";

const Overlap = () => (
  <div className={style.root}>
    <div className={style.container}>
      <Parallax translateY={[-50, 50]} translateX={[-40, 20]}>
        <Svg svg={circle} />
      </Parallax>
      <Parallax
        translateY={[-50, 50]}
        translateX={[40, -20]}
        className={style.circleRings}
      >
        <Svg svg={circleRings} />
      </Parallax>
    </div>
  </div>
);

export default Overlap;


================================================
FILE: original/components/Overlap/Overlap.module.scss
================================================
@import "../../styles/colors";

.root {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  align-items: space-around;
  justify-content: center;
  align-items: center;
  padding-top: 25vh;
  z-index: 1;
}

.container {
  position: relative;
  width: 30em;
}

.circleRings {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}


================================================
FILE: original/components/ParallaxExample/ParallaExample.module.scss
================================================
@import "../../styles/colors";

.root {
  background-color: $tan;
}

:global {
  body {
    margin: 0;
    font-family: "Roboto Mono", san-serif;
    color: $tan;
    font-size: 12px;
    font-weight: 300;
  }

  h1,
  .h1 {
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.3em;
    color: $plum;
  }

  code {
    display: inline-block;
    margin: 0 0.4em 0 0;
    font-family: "Roboto Mono", san-serif;
    background-color: lighten($plum, 10%);
    padding: 0.2em 0.4em;
    border-radius: 3px;
  }

  p {
    margin: 2em 0;
    font-size: 1.2em;
    line-height: 1.6;
    color: darken($tan, 15%);
  }

  * {
    box-sizing: border-box;
  }

  a {
    color: $tan;
    text-decoration: none;
    font-weight: bold;
    &:hover {
      color: $purple;
    }
  }

  hr {
    width: 100%;
    height: 3em;
    background-color: #fff;
    border: none;
  }

  .btn {
    display: inline-block;
    border: 2px solid $purple;
    padding: 0.6em 1em;
    color: $purple;
    font-weight: 500;
    margin-right: 1em;

    &:hover {
      background-color: $purple;
      color: $tan;
    }
  }

  .visually-hidden {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    overflow: hidden;
  }
}


================================================
FILE: original/components/ParallaxExample/ParallaxExample.js
================================================
import React, { Component } from "react";
import {
  Intro,
  IntroCopy,
  Marquee,
  TriangleGrid,
  Overlap,
  Svg,
  ShapeField,
} from "../";

import * as style from "./ParallaExample.module.scss";

import noisePattern from "bundle-text:../shared/noise-pattern.svg";
import dotPattern from "bundle-text:../shared/dot-pattern.svg";

export default class ParallaxExample extends Component {
  render() {
    return (
      <div className={style.root}>
        <Intro />
        <IntroCopy />
        <ShapeField />
        <Marquee />
        <Overlap />
        <TriangleGrid />

        {/** Shared SVG patterns */}
        <div className="visually-hidden">
          <Svg svg={noisePattern} />
          <Svg svg={dotPattern} />
        </div>
      </div>
    );
  }
}


================================================
FILE: original/components/ShapeField/ShapeField.js
================================================
import React, { Component } from "react";
import { Parallax } from "react-scroll-parallax";
import { Svg } from "../";

import * as style from "./ShapeField.module.scss";

import cluster01HemiLeft from "bundle-text:./cluster-01-hemi-left.svg";
import cluster01HemiRight from "bundle-text:./cluster-01-hemi-right.svg";
import cluster01Rect from "bundle-text:./cluster-01-rect.svg";

import cluster02Hemi from "bundle-text:./cluster-02-hemi.svg";
import cluster02TriangleBig from "bundle-text:./cluster-02-triangle-big.svg";
import cluster02TriangleSmall from "bundle-text:./cluster-02-triangle-small.svg";

import cluster03TriangleTop from "bundle-text:./cluster-03-triangle-top.svg";
import cluster03TriangleBottom from "bundle-text:./cluster-03-triangle-bottom.svg";
import cluster03TriangleBig from "bundle-text:./cluster-03-triangle-big.svg";

import cluster04Triangle from "bundle-text:./cluster-04-triangle.svg";
import cluster04Square from "bundle-text:./cluster-04-square.svg";
import cluster04HemiRight from "bundle-text:./cluster-04-hemi-right.svg";

export default class ShapeField extends Component {
  render() {
    return (
      <div className={style.root}>
        <div className={style.shapeCluster01}>
          <Parallax translateY={[100, -100]} className={style.hemiLeft}>
            <Svg svg={cluster01HemiLeft} />
          </Parallax>
          <Svg svg={cluster01Rect} />
          <Parallax translateY={[-100, 100]} className={style.hemiRight}>
            <Svg svg={cluster01HemiRight} />
          </Parallax>
        </div>

        <div className={style.shapeCluster02}>
          <Svg svg={cluster02Hemi} className={style.hemi} />
          <Parallax translateY={[-30, 30]} className={style.triangleBig}>
            <Svg svg={cluster02TriangleBig} />
          </Parallax>
          <Parallax translateY={[30, -30]} className={style.triangleSmall}>
            <Svg svg={cluster02TriangleSmall} />
          </Parallax>
        </div>

        <div className={style.shapeCluster03}>
          <Parallax translateY={[60, -20]} className={style.triangleTop}>
            <Svg svg={cluster03TriangleTop} />
          </Parallax>

          <Svg svg={cluster03TriangleBottom} className={style.triangleTop} />
          <Parallax translateY={[-60, 60]} className={style.triangleBig}>
            <Svg svg={cluster03TriangleBig} />
          </Parallax>
        </div>

        <div className={style.shapeCluster04}>
          <Svg svg={cluster04Square} className={style.square} />
          <Parallax translateY={[-60, 60]} className={style.triangle}>
            <Svg svg={cluster04Triangle} />
          </Parallax>
          <Parallax translateY={[-30, 30]} className={style.hemiRight}>
            <Svg svg={cluster04HemiRight} />
          </Parallax>
        </div>
      </div>
    );
  }
}


================================================
FILE: original/components/ShapeField/ShapeField.module.scss
================================================
@import "../../styles/colors";

.root {
  position: relative;
  margin-top: 25vh;
  height: 75vh;
}

.shapeCluster01 {
  position: absolute;
  top: 0%;
  left: 40%;
  width: 8em;

  .hemiLeft {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
  }

  .hemiRight {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
  }
}

.shapeCluster02 {
  position: absolute;
  left: 5%;
  top: 25%;
  width: 18em;
  height: 30em;

  .triangleBig {
    position: absolute;
    left: 0;
    top: 20%;
    width: 60%;
  }

  .triangleSmall {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
  }

  .hemi {
    position: absolute;
    right: 0;
    bottom: 30%;
    width: 40%;
  }
}

.shapeCluster03 {
  position: absolute;
  top: 90%;
  left: 45%;
  width: 17em;
  height: 10em;

  .triangleTop {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .triangleBottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .triangleBig {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80%;
  }
}

.shapeCluster04 {
  position: absolute;
  top: 25%;
  right: 5%;
  width: 16em;

  .triangle {
    position: absolute;
    width: 66.666%;
    top: 0;
    left: 0;
  }
  .square {
    position: absolute;
    width: 66.666%;
    right: 0;
    top: 0;
  }
  .hemiRight {
    position: absolute;
    width: 33.333%;
    right: 0;
    top: 0;
  }
}


================================================
FILE: original/components/Svg/Svg.js
================================================
import React from "react";

import * as style from "./Svg.module.scss";

export default function Svg(props) {
  const Element = props.el;
  const className =
    `svg-container ${style.root}` +
    (props.className ? ` ${props.className}` : "");

  return (
    <Element
      style={props.style}
      className={className}
      dangerouslySetInnerHTML={{ __html: props.svg }}
    />
  );
}

Svg.defaultProps = {
  el: "span",
};


================================================
FILE: original/components/Svg/Svg.module.scss
================================================
.root {
  display: block;
  svg {
    display: block;
    width: 100%;
    height: auto;
  }
}


================================================
FILE: original/components/TriangleGrid/TriangleGrid.js
================================================
import React from "react";
import * as style from "./TriangleGrid.module.scss";
import { Svg } from "..";
import { Parallax } from "react-scroll-parallax";
import gridPurple from "bundle-text:./grid-purple.svg";
import gridWhite from "bundle-text:./grid-white.svg";
import angleTop from "bundle-text:../shared/angle-dark-top.svg";

const TriangleGrid = () => (
  <main className={style.root}>
    <Svg svg={angleTop} className={style.angleTop} />
    <article className={style.copy}>
      <h1 className={style.headline}>React Scroll Parallax</h1>
      <p>
        React hooks and components to create parallax scroll effects for
        banners, images or any other DOM elements.
      </p>
      <p>
        Utilizes{" "}
        <a href="https://parallax-controller.damnthat.tv/">
          Parallax Controller
        </a>{" "}
        to add vertical or horizontal scrolling based effects to elements.{" "}
      </p>
      <p>
        <a href="https://parallax-controller.damnthat.tv/docs/performance">
          Optimized
        </a>{" "}
        to reduce jank on scroll and works with SSR and SSG rendered React apps.
      </p>
      <p>
        <code>yarn add react-scroll-parallax</code>
        <code>npm i react-scroll-parallax</code>
      </p>
      <p>
        <a className="btn" href="https://react-scroll-parallax.damnthat.tv/">
          Documentation
        </a>
        <a
          className="btn"
          href="https://github.com/jscottsmith/react-scroll-parallax"
        >
          GitHub
        </a>
        <a
          className="btn"
          href="https://www.npmjs.com/package/react-scroll-parallax"
        >
          View on NPM
        </a>
      </p>
    </article>
    <div className={style.container}>
      <Parallax translateY={[-25, 25]}>
        <Svg svg={gridPurple} className={style.trianglesPurple} />
      </Parallax>
      <Parallax translateX={[-13, 13]} translateY={[-50, 50]}>
        <Svg svg={gridWhite} />
      </Parallax>
    </div>
  </main>
);

export default TriangleGrid;


================================================
FILE: original/components/TriangleGrid/TriangleGrid.module.scss
================================================
@import "../../styles/colors";

.root {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  padding: 25vh 2em;
  background-color: $plum;
}

.container {
  position: relative;
  width: 25em;
  margin-right: 10vw;
  flex-shrink: 0;
}

.angleTop {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
}

.headline {
  font-size: 2em;
  color: $purple;
}

.copy {
  margin: 0 auto;
  flex-grow: 1;
  text-align: left;
  max-width: 500px;

  code {
    padding: 0.4em 1em;
    font-size: 0.8em;
    color: white;
  }
}

.trianglesPurple {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}


================================================
FILE: original/components/index.js
================================================
import Intro from "./Intro/Intro";
import IntroCopy from "./IntroCopy/IntroCopy";
import Marquee from "./Marquee/Marquee";
import ParallaxExample from "./ParallaxExample/ParallaxExample";
import Svg from "./Svg/Svg";
import ShapeField from "./ShapeField/ShapeField";
import Overlap from "./Overlap/Overlap";
import TriangleGrid from "./TriangleGrid/TriangleGrid";
import App from "./App/App";

export {
  Intro,
  IntroCopy,
  Marquee,
  ParallaxExample,
  Svg,
  ShapeField,
  Overlap,
  TriangleGrid,
  App,
};


================================================
FILE: original/index.css
================================================
.star {
  position: fixed;
  top: 1em;
  right: 1em;
}


================================================
FILE: original/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React Scroll Parallax</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="J Scott Smith" />
    <meta
      name="description"
      content="React components to create parallax scroll effects for banners, images or any other DOM elements."
    />

    <!-- <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> -->
    <meta
      property="og:description"
      content="React components to create parallax scroll effects for banners, images or any other DOM elements."
    />
    <meta property="og:title" content="React Scroll Parallax" />

    <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:300,500,700i"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="root"></div>
    <div class="star">
      <a
        class="github-button"
        href="https://github.com/jscottsmith/react-scroll-parallax"
        data-icon="octicon-star"
        aria-label="Star jscottsmith/react-scroll-parallax on GitHub"
        >Star</a
      >
    </div>
    <script type="module" src="/index.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>


================================================
FILE: original/index.js
================================================
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App/App";

const root = document.getElementById("root");

ReactDOM.render(<App />, root);


================================================
FILE: original/package.json
================================================
{
  "name": "parallax-example",
  "version": "1.0.0",
  "author": "J Scott Smith",
  "license": "MIT",
  "engines": {
    "node": "20.x"
  },
  "scripts": {
    "start": "yarn parcel index.html",
    "build": "yarn parcel build index.html",
    "deploy": "gh-pages -d dist"
  },
  "devDependencies": {
    "@parcel/transformer-inline-string": "^2.12.0",
    "@parcel/transformer-sass": "^2.12.0",
    "gh-pages": "^3.2.3",
    "parcel": "^2.12.0",
    "postcss": "^8.2.1",
    "postcss-modules": "^6.0.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scroll-parallax": "4.0.0-beta.1"
  },
  "targets": {
    "default": {
      "context": "browser",
      "outputFormat": "global",
      "includeNodeModules": true
    }
  }
}


================================================
FILE: original/styles/colors.scss
================================================
$plum: #3d3547;
$purple: #a179af;
$tan: #edeaea;

================================================
FILE: original/svgo.config.js
================================================
/**
 * Parcel's @parcel/optimizer-svg runs SVGO on *.svg in production.
 * Pattern-library SVGs only expose ids (e.g. url(#noise-pattern)); SVGO treats
 * unreferenced defs as removable, which strips the whole pattern.
 *
 * @type {import('svgo').Config}
 */
module.exports = {
  plugins: [
    {
      name: "preset-default",
      params: {
        overrides: {
          // Keep <defs>/<pattern> used only from external CSS / other SVGs.
          removeUselessDefs: false,
        },
      },
    },
  ],
};


================================================
FILE: original/vercel.json
================================================
{
  "buildCommand": "yarn build",
  "outputDirectory": "dist",
  "installCommand": "yarn install --frozen-lockfile",
  "build": {
    "env": {
      "PARCEL_AUTOINSTALL": "0"
    }
  }
}


================================================
FILE: space-worms/README.md
================================================
# 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.


================================================
FILE: space-worms/components/App/App.js
================================================
import React, { Component } from "react";
import { ParallaxProvider } from "react-scroll-parallax";
import { ParallaxExample } from "../";

export default class App extends Component {
  render() {
    return (
      <ParallaxProvider>
        <main
          style={{
            overflow: "hidden",
            background: "#1f1f1f",
          }}
        >
          <ParallaxExample />
          <ParallaxExample />
          <ParallaxExample />
          <ParallaxExample />
        </main>
      </ParallaxProvider>
    );
  }
}


================================================
FILE: space-worms/components/ParallaxExample/ParallaExample.module.scss
================================================
.root {
  position: relative;
  height: 200vh;
}

.artist {
  position: fixed;
  right: 10px;
  bottom: 10px;
  text-align: right;
  color: rgb(77, 103, 114);
  font-family: monospace;
  z-index: 100;

  a {
    color: rgb(67, 99, 187);
  }
}

.layer {
  position: absolute;
  width: 120vw;
  height: auto;
}

.layer1 {
  top: 25%;
  left: -40%;
  z-index: 0;
}
.layer2 {
  top: -40%;
  left: 0%;
  z-index: 1;
}
.layer3 {
  top: -30%;
  left: 15%;
  z-index: 2;
}
.layer4 {
  top: -5%;
  left: -25%;
  z-index: 3;
}
.layer5 {
  top: -30%;
  left: -30%;
  z-index: 4;
}
.layer6 {
  top: 20%;
  left: 20%;
  z-index: 5;
}


================================================
FILE: space-worms/components/ParallaxExample/ParallaxExample.js
================================================
import React, { useRef } from "react";
import { useParallax } from "react-scroll-parallax";
import cx from "classnames";
import { Spaceworms } from "../Spaceworms";

import worm1 from "../../image/worm-1.png";
import worm2 from "../../image/worm-2.png";
import worm3 from "../../image/worm-3.png";
import worm4 from "../../image/worm-4.png";
import worm5 from "../../image/worm-5.png";
import worm6 from "../../image/worm-6.png";

import * as styles from "./ParallaExample.module.scss";

export default function ParallaxExample() {
  const target = useRef();

  const parallax1 = useParallax({
    speed: -40,
    rotate: [-30, 30],
  });
  const parallax2 = useParallax({
    speed: -20,
    rotate: [-30, 50],
  });
  const parallax3 = useParallax({
    speed: 10,
    rotate: [-60, 0],
  });
  const parallax4 = useParallax({
    speed: 20,
    rotate: [-30, 50],
  });
  const parallax5 = useParallax({
    speed: 40,
    rotate: [-30, 30],
  });
  const parallax6 = useParallax({
    speed: 60,
    rotate: [-30, 50],
  });

  return (
    <div>
      <p className={styles.artist}>
        Art adapted from{" "}
        <a
          href="https://www.figma.com/community/file/1066061995156177203"
          target="_blank"
          rel="noreferrer noopener"
        >
          Spaceworms
        </a>{" "}
        by{" "}
        <a
          href="http://www.fonsmans.com"
          target="_blank"
          rel="noreferrer noopener"
        >
          Fons Mans
        </a>
      </p>
      <div className={styles.root} ref={target}>
        <div
          style={{
            display: "flex",
            flexFlow: "column",
            justifyContent: "space-around",
            position: "absolute",
            textAlign: "center",
            inset: 0,
          }}
        >
          <Spaceworms zIndex="1" />
          <Spaceworms zIndex="2" />
          <Spaceworms zIndex="4" />
          <Spaceworms zIndex="3" />
          <Spaceworms zIndex="5" />
        </div>
        <img
          src={worm1}
          className={cx(styles.layer, styles.layer1)}
          ref={parallax1.ref}
          onLoad={() => parallax1.controller.update()}
          draggable={false}
        />
        <img
          src={worm2}
          className={cx(styles.layer, styles.layer2)}
          ref={parallax2.ref}
          onLoad={() => parallax2.controller.update()}
          draggable={false}
        />
        <img
          src={worm3}
          className={cx(styles.layer, styles.layer3)}
          ref={parallax3.ref}
          onLoad={() => parallax3.controller.update()}
          draggable={false}
        />
        <img
          src={worm4}
          className={cx(styles.layer, styles.layer4)}
          ref={parallax4.ref}
          onLoad={() => parallax4.controller.update()}
          draggable={false}
        />
        <img
          src={worm5}
          className={cx(styles.layer, styles.layer5)}
          ref={parallax5.ref}
          onLoad={() => parallax5.controller.update()}
          draggable={false}
        />
        <img
          src={worm6}
          className={cx(styles.layer, styles.layer6)}
          ref={parallax6.ref}
          onLoad={() => parallax6.controller.update()}
          draggable={false}
        />
      </div>
    </div>
  );
}


================================================
FILE: space-worms/components/Spaceworms/index.jsx
================================================
import React from "react";
import { useParallax } from "react-scroll-parallax";
import * as styles from "./index.module.scss";

export const Spaceworms = (props) => {
  const text = useParallax({
    translateX: [10, -50],
  });
  return (
    <div
      className={styles.text}
      style={{
        zIndex: props.zIndex,
      }}
    >
      <div ref={text.ref}>SPACEWORMS</div>
    </div>
  );
};


================================================
FILE: space-worms/components/Spaceworms/index.module.scss
================================================
.text {
  position: relative;
  color: white;
  font-weight: 900;
  font-family: "futura-pt", futura, sans-serif;
  font-size: 25vw;
  line-height: 0.7;
  white-space: nowrap;
}


================================================
FILE: space-worms/components/index.js
================================================
import ParallaxExample from "./ParallaxExample/ParallaxExample";
import App from "./App/App";

export { ParallaxExample, App };


================================================
FILE: space-worms/index.css
================================================
.star {
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 999;
}

body {
  margin: 0;
  padding: 0;
}


================================================
FILE: space-worms/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Spaceworms | React Scroll Parallax</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="J Scott Smith" />
    <meta
      name="description"
      content="React components to create parallax scroll effects for banners, images or any other DOM elements."
    />

    <!-- <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> -->
    <meta
      property="og:description"
      content="React components to create parallax scroll effects for banners, images or any other DOM elements."
    />
    <meta property="og:title" content="React Scroll Parallax" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css"
    />

    <link rel="stylesheet" href="https://use.typekit.net/bwo5nqc.css" />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="root"></div>
    <div class="star">
      <a
        class="github-button"
        href="https://github.com/jscottsmith/react-scroll-parallax"
        data-icon="octicon-star"
        aria-label="Star jscottsmith/react-scroll-parallax on GitHub"
        >Star</a
      >
    </div>
    <script type="module" src="/index.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>


================================================
FILE: space-worms/index.js
================================================
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App/App";

const root = document.getElementById("root");

ReactDOM.render(<App />, root);


================================================
FILE: space-worms/package.json
================================================
{
  "name": "space-worms",
  "version": "1.0.0",
  "author": "J Scott Smith",
  "license": "MIT",
  "scripts": {
    "start": "yarn parcel index.html",
    "build": "yarn parcel build index.html"
  },
  "devDependencies": {
    "@parcel/transformer-inline-string": "^2.16.4",
    "@parcel/transformer-sass": "^2.16.4",
    "gh-pages": "^3.2.3",
    "parcel": "^2.16.4"
  },
  "dependencies": {
    "classnames": "^2.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scroll-parallax": "4.0.0-beta.1"
  }
}


================================================
FILE: test-offsets/README.md
================================================
# 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.


================================================
FILE: test-offsets/components/App/App.js
================================================
import React, { Component } from "react";
import { ParallaxProvider } from "react-scroll-parallax";
import { ParallaxTest } from "../";

export class App extends Component {
  render() {
    return (
      <ParallaxProvider>
        <ParallaxTest />
      </ParallaxProvider>
    );
  }
}


================================================
FILE: test-offsets/components/ParallaxTest/ParallaxTest.js
================================================
import React from "react";
import { Parallax } from "react-scroll-parallax";
import * as style from "./ParallaxTest.module.scss";

const INC_AMOUNT = 10;
const START_NUM_ELEMENTS = 10;

export class ParallaxTest extends React.Component {
  state = {
    elements: new Array(START_NUM_ELEMENTS).fill(null).map((x, i) => i),
    offsetY: INC_AMOUNT,
    slowerScrollRate: false,
    unitPercent: false,
    disabled: false,
  };

  handleAdd = () => {
    const elements = [...this.state.elements, this.state.elements.length];
    this.setState({
      elements,
    });
  };

  handleRemove = () => {
    const elements = this.state.elements.slice(
      0,
      this.state.elements.length - 1
    );
    this.setState({
      elements,
    });
  };

  increaseOffsetY = () => {
    const offsetY = this.state.offsetY + INC_AMOUNT;
    this.setState({
      offsetY,
    });
  };

  decreaseOffsetY = () => {
    const offsetY =
      this.state.offsetY - INC_AMOUNT < 0 ? 0 : this.state.offsetY - INC_AMOUNT;
    this.setState({
      offsetY,
    });
  };

  toggleSpeed = () => {
    const slowerScrollRate = !this.state.slowerScrollRate;
    this.setState({
      slowerScrollRate,
    });
  };

  toggleValue = () => {
    const unitPercent = !this.state.unitPercent;
    this.setState({
      unitPercent,
    });
  };

  toggleDisabled = () => {
    const disabled = !this.state.disabled;
    this.setState({
      disabled,
    });
  };

  mapToParallax() {
    const offsetY = this.state.offsetY;
    const slowerScrollRate = this.state.slowerScrollRate;

    return this.state.elements.map((number, i) => {
      const unit = this.state.unitPercent ? "%" : "px";

      const a = offsetY * -1 * i + unit;
      const b = offsetY * i + unit;

      const translateY = slowerScrollRate ? [a, b] : [b, a];

      return (
        <span className={`${style.item} parallax-outer`}>
          <Parallax
            key={i}
            disabled={this.state.disabled}
            translateY={translateY}
            className="parallax-inner"
          >
            {number}
          </Parallax>
        </span>
      );
    });
  }

  render() {
    return (
      <div className={style.parallaxTest}>
        <h1 className={style.h1}>{this.mapToParallax()}</h1>
        <div className={style.buttons}>
          <div className={style.currentState}>
            <h4>
              Parallax Elements:
              <span className={style.value}>{this.state.elements.length}</span>
            </h4>
            <button onClick={this.handleAdd}>Add</button>
            <button onClick={this.handleRemove}>Remove</button>
          </div>
          <div className={style.currentState}>
            <h4>
              Y Offsets:
              <span className={style.value}>
                {this.state.offsetY}
                {this.state.unitPercent ? "%" : "px"}
              </span>
            </h4>
            <button onClick={this.increaseOffsetY}>Increase</button>
            <button onClick={this.decreaseOffsetY}>Decrease</button>
          </div>
          <div className={style.currentState}>
            <h4>
              translatY:
              <span className={style.value}>
                {this.state.slowerScrollRate
                  ? `[-${this.state.offsetY}${
                      this.state.unitPercent ? "%" : "px"
                    }, ${this.state.offsetY}${
                      this.state.unitPercent ? "%" : "px"
                    }]`
                  : `[${this.state.offsetY}${
                      this.state.unitPercent ? "%" : "px"
                    }, -${this.state.offsetY}${
                      this.state.unitPercent ? "%" : "px"
                    }]`}
                {/* {this.state.slowerScrollRate ? "Slower" : "Faster"} */}
              </span>
            </h4>
            <button onClick={this.toggleSpeed}>
              {this.state.slowerScrollRate ? "Faster" : "Slower"}
            </button>
          </div>
          <div className={style.currentState}>
            <h4>
              Unit:
              <span className={style.value}>
                {this.state.unitPercent ? "Percent" : "Pixels"}
              </span>
            </h4>
            <button onClick={this.toggleValue}>
              {this.state.unitPercent ? "Pixels" : "Percent"}
            </button>
          </div>
          <div className={style.currentState}>
            <h4>
              Disabled:
              <span className={style.value}>
                {this.state.disabled ? "True" : "False"}
              </span>
            </h4>
            <button onClick={this.toggleDisabled}>
              {this.state.disabled ? "Enable" : "Disable"}
            </button>
          </div>
        </div>
      </div>
    );
  }
}


================================================
FILE: test-offsets/components/ParallaxTest/ParallaxTest.module.scss
================================================
.parallaxTest {
  margin: 100vh 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.h1 {
  width: 100%;
  font-size: 9vw;
  text-align: center;
}

.item {
  display: inline-block;
}

.buttons {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1em;
}

.currentState {
  margin-bottom: 1em;

  .value {
    margin: 0 0.5em;
    color: lightgreen;
  }

  button {
    background-color: lightblue;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    font-family: "Roboto Mono", monospace;
    font-size: 12px;
    font-weight: bold;
    margin: 0.2em;
    max-width: 10em;
    padding: 0.2em 1em;

    &:hover {
      color: #222;
      background-color: lightgreen;
    }
  }
}

: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-size: 12px;
    font-family: "Roboto Mono", monsopace;
    font-style: normal;
    color: #eee;
  }

  * {
    box-sizing: border-box;
  }

  .parallax-outer {
    position: relative;
  }

  .parallax-inner {
    position: relative;
    // background-color: rgba(255, 0, 0, 0.3);
  }

  // .is-in-view .parallax-inner {
  //     background-color: rgba(0, 255, 0, 0.3);
  // }

  .parallax-outer::after,
  .parallax-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid lightgreen;
  }

  .parallax-outer::after {
    border: 2px solid orangered;
    z-index: -1;
  }
}


================================================
FILE: test-offsets/components/index.js
================================================
export { ParallaxTest } from "./ParallaxTest/ParallaxTest.js";
export { App } from "./App/App.js";


================================================
FILE: test-offsets/index.css
================================================
.star {
  position: fixed;
  top: 1em;
  right: 1em;
}


================================================
FILE: test-offsets/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React Scroll Parallax</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="J Scott Smith" />
    <meta
      name="description"
      content="React components to create parallax scroll effects for banners, images or any other DOM elements."
    />
    <meta
      property="og:description"
      content="React components to create parallax scroll effects for banners, images or any other DOM elements."
    />
    <meta property="og:title" content="React Scroll Parallax" />

    <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:300,500,700i"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="root"></div>
    <div class="star">
      <a
        class="github-button"
        href="https://github.com/jscottsmith/react-scroll-parallax"
        data-icon="octicon-star"
        aria-label="Star jscottsmith/react-scroll-parallax on GitHub"
        >Star</a
      >
    </div>
    <script type="module" src="/index.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>


================================================
FILE: test-offsets/index.js
================================================
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./components";

const root = document.getElementById("root");

ReactDOM.render(<App />, root);


================================================
FILE: test-offsets/package.json
================================================
{
  "name": "parallax-example",
  "version": "1.0.0",
  "author": "J Scott Smith",
  "license": "MIT",
  "scripts": {
    "start": "yarn parcel index.html",
    "build": "yarn parcel build index.html",
    "deploy": "gh-pages -d dist"
  },
  "devDependencies": {
    "@parcel/transformer-inline-string": "^2.2.1",
    "@parcel/transformer-sass": "^2.2.1",
    "gh-pages": "^3.2.3",
    "parcel": "^2.2.1"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scroll-parallax": "4.0.0-beta.1"
  }
}