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/) ================================================ 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 ( ); } } ================================================ 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 (
Art by Aethrall
); } ================================================ 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 ================================================ React Scroll Parallax
================================================ 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(, 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 (
); } ================================================ 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 ================================================ Mountains | React Scroll Parallax
================================================ 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(, 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 ( ); } } ================================================ 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 = () => (

Scroll

); 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 = () => (
{copy.map((letter, i) => ( {letter} ))}
); 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 = () => (
Horizontal
); 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 = () => (
); 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 (
{/** Shared SVG patterns */}
); } } ================================================ 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 (
); } } ================================================ 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 ( ); } 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 = () => (

React Scroll Parallax

React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.

Utilizes{" "} Parallax Controller {" "} to add vertical or horizontal scrolling based effects to elements.{" "}

Optimized {" "} to reduce jank on scroll and works with SSR and SSG rendered React apps.

yarn add react-scroll-parallax npm i react-scroll-parallax

Documentation GitHub View on NPM

); 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 ================================================ React Scroll Parallax
================================================ 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(, 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 / 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 (
); } } ================================================ 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 (

Art adapted from{" "} Spaceworms {" "} by{" "} Fons Mans

parallax1.controller.update()} draggable={false} /> parallax2.controller.update()} draggable={false} /> parallax3.controller.update()} draggable={false} /> parallax4.controller.update()} draggable={false} /> parallax5.controller.update()} draggable={false} /> parallax6.controller.update()} draggable={false} />
); } ================================================ 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 (
SPACEWORMS
); }; ================================================ 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 ================================================ Spaceworms | React Scroll Parallax
================================================ 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(, 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 ( ); } } ================================================ 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 ( {number} ); }); } render() { return (

{this.mapToParallax()}

Parallax Elements: {this.state.elements.length}

Y Offsets: {this.state.offsetY} {this.state.unitPercent ? "%" : "px"}

translatY: {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"} */}

Unit: {this.state.unitPercent ? "Percent" : "Pixels"}

Disabled: {this.state.disabled ? "True" : "False"}

); } } ================================================ 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 ================================================ React Scroll Parallax
================================================ 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(, 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" } }