├── .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 ├── image │ ├── parallax-demon-woods-bg.png │ ├── parallax-demon-woods-close-trees.png │ ├── parallax-demon-woods-far-trees.png │ └── parallax-demon-woods-mid-trees.png ├── index.css ├── index.html ├── index.js ├── package.json ├── styles │ └── colors.scss └── yarn.lock ├── mountains ├── README.md ├── components │ ├── App │ │ └── App.js │ └── index.js ├── image │ ├── bg-1.jpg │ ├── bg-2.png │ ├── bg-3.png │ ├── bg-4.png │ └── bg-5.png ├── index.css ├── index.html ├── index.js ├── package.json └── yarn.lock ├── original ├── README.md ├── components │ ├── App │ │ └── App.js │ ├── Intro │ │ ├── Intro.js │ │ ├── Intro.module.scss │ │ ├── hemispheres.svg │ │ └── ring-of-dots.svg │ ├── IntroCopy │ │ ├── IntroCopy.js │ │ └── IntroCopy.module.scss │ ├── Marquee │ │ ├── Marquee.js │ │ ├── Marquee.module.scss │ │ ├── box-bg.svg │ │ └── box-outline.svg │ ├── Overlap │ │ ├── Overlap.js │ │ ├── Overlap.module.scss │ │ ├── circle-rings.svg │ │ └── circle.svg │ ├── ParallaxExample │ │ ├── ParallaExample.module.scss │ │ └── ParallaxExample.js │ ├── ShapeField │ │ ├── ShapeField.js │ │ ├── ShapeField.module.scss │ │ ├── cluster-01-hemi-left.svg │ │ ├── cluster-01-hemi-right.svg │ │ ├── cluster-01-rect.svg │ │ ├── cluster-02-hemi.svg │ │ ├── cluster-02-triangle-big.svg │ │ ├── cluster-02-triangle-small.svg │ │ ├── cluster-02-triangle.svg │ │ ├── cluster-03-triangle-big.svg │ │ ├── cluster-03-triangle-bottom.svg │ │ ├── cluster-03-triangle-top.svg │ │ ├── cluster-04-hemi-right.svg │ │ ├── cluster-04-square.svg │ │ └── cluster-04-triangle.svg │ ├── Svg │ │ ├── Svg.js │ │ └── Svg.module.scss │ ├── TriangleGrid │ │ ├── TriangleGrid.js │ │ ├── TriangleGrid.module.scss │ │ ├── grid-purple.svg │ │ └── grid-white.svg │ ├── index.js │ └── shared │ │ ├── angle-dark-top.svg │ │ ├── divider.svg │ │ ├── dot-pattern.svg │ │ └── noise-pattern.svg ├── index.css ├── index.html ├── index.js ├── package.json ├── styles │ └── colors.scss └── yarn.lock ├── space-worms ├── README.md ├── components │ ├── App │ │ └── App.js │ ├── ParallaxExample │ │ ├── ParallaExample.module.scss │ │ └── ParallaxExample.js │ ├── Spaceworms │ │ ├── index.jsx │ │ └── index.module.scss │ └── index.js ├── image │ ├── worm-1.png │ ├── worm-2.png │ ├── worm-3.png │ ├── worm-4.png │ ├── worm-5.png │ └── worm-6.png ├── index.css ├── index.html ├── index.js ├── package.json └── yarn.lock └── test-offsets ├── README.md ├── components ├── App │ └── App.js ├── ParallaxTest │ ├── ParallaxTest.js │ └── ParallaxTest.module.scss └── index.js ├── index.css ├── index.html ├── index.js ├── package.json └── yarn.lock /.github/workflows/horizontal-scroll.yml: -------------------------------------------------------------------------------- 1 | name: Deploy Horizontal Scroll 2 | 3 | on: [push] 4 | 5 | defaults: 6 | run: 7 | shell: bash 8 | working-directory: horizontal-scroll 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | name: Deploying to surge 14 | 15 | strategy: 16 | matrix: 17 | node-version: [14.x] 18 | 19 | steps: 20 | - name: Checkout repository 21 | uses: actions/checkout@v2 22 | with: 23 | fetch-depth: 2 24 | 25 | - name: Set up Node.js ${{ matrix.node-version }} 26 | uses: actions/setup-node@v1 27 | with: 28 | node-version: ${{ matrix.node-version }} 29 | 30 | - name: Install dependencies 31 | run: yarn install 32 | 33 | - name: Build 34 | run: yarn build 35 | 36 | - name: Install Surge 37 | run: npm install --global surge 38 | 39 | - name: Surge deploy 40 | run: surge ./dist react-scroll-parallax-horizontal-scroll.surge.sh --token ${{ secrets.SURGE_TOKEN }} 41 | -------------------------------------------------------------------------------- /.github/workflows/mountains.yml: -------------------------------------------------------------------------------- 1 | name: Deploy Mountains 2 | 3 | on: [push] 4 | 5 | defaults: 6 | run: 7 | shell: bash 8 | working-directory: mountains 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | name: Deploying to surge 14 | 15 | strategy: 16 | matrix: 17 | node-version: [14.x] 18 | 19 | steps: 20 | - name: Checkout repository 21 | uses: actions/checkout@v2 22 | with: 23 | fetch-depth: 2 24 | 25 | - name: Set up Node.js ${{ matrix.node-version }} 26 | uses: actions/setup-node@v1 27 | with: 28 | node-version: ${{ matrix.node-version }} 29 | 30 | - name: Install dependencies 31 | run: yarn install 32 | 33 | - name: Build 34 | run: yarn build 35 | 36 | - name: Install Surge 37 | run: npm install --global surge 38 | 39 | - name: Surge deploy 40 | run: surge ./dist react-scroll-parallax-mountains.surge.sh --token ${{ secrets.SURGE_TOKEN }} 41 | -------------------------------------------------------------------------------- /.github/workflows/space-worms.yml: -------------------------------------------------------------------------------- 1 | name: Deploy Spaceworms 2 | 3 | on: [push] 4 | 5 | defaults: 6 | run: 7 | shell: bash 8 | working-directory: space-worms 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | name: Deploying to surge 14 | 15 | strategy: 16 | matrix: 17 | node-version: [14.x] 18 | 19 | steps: 20 | - name: Checkout repository 21 | uses: actions/checkout@v2 22 | with: 23 | fetch-depth: 2 24 | 25 | - name: Set up Node.js ${{ matrix.node-version }} 26 | uses: actions/setup-node@v1 27 | with: 28 | node-version: ${{ matrix.node-version }} 29 | 30 | - name: Install dependencies 31 | run: yarn install 32 | 33 | - name: Build 34 | run: yarn build 35 | 36 | - name: Install Surge 37 | run: npm install --global surge 38 | 39 | - name: Surge deploy 40 | run: surge ./dist react-scroll-parallax-space-worms.surge.sh --token ${{ secrets.SURGE_TOKEN }} 41 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .parcel-cache 4 | .DS_Store 5 | dist -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Parallax Examples 2 | 3 | A collection of examples in React using [`react-scroll-parallax`](https://github.com/jscottsmith/react-scroll-parallax). 4 | 5 | - [Documentation](https://react-scroll-parallax.damnthat.tv) 6 | - [GitHub](https://github.com/jscottsmith/react-scroll-parallax) 7 | - [NPM Package](https://www.npmjs.com/package/react-scroll-parallax) 8 | 9 | ## Examples 10 | 11 | - [Example Site](https://react-scroll-parallax-examples.vercel.app/) 12 | - [Horizontal Scroll](https://react-scroll-parallax-horizontal-scroll.surge.sh/) 13 | - [Mountains](https://react-scroll-parallax-mountains.surge.sh/) 14 | - [Parallax Testing](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-test/) 15 | 16 | -------------------------------------------------------------------------------- /horizontal-scroll/README.md: -------------------------------------------------------------------------------- 1 | # Parallax Example Site 2 | 3 | The original example site using `react-scroll-parallax` upgraded to version 3. 4 | 5 | 🔗 [View Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/dist/) 6 | 7 | - Made with [react-scroll-parallax v3](https://github.com/jscottsmith/react-scroll-parallax) 8 | - Now with better [documentation](https://react-scroll-parallax.damnthat.tv) 9 | - Check it out [on NPM](https://www.npmjs.com/package/react-scroll-parallax) 10 | 11 | ## Dev 12 | 13 | Packed with [parcel](https://parceljs.org/). Use `yarn start` to run locally. 14 | -------------------------------------------------------------------------------- /horizontal-scroll/components/App/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { ParallaxProvider } from "react-scroll-parallax"; 3 | import { ParallaxExample } from "../"; 4 | 5 | export default class App extends Component { 6 | render() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /horizontal-scroll/components/ParallaxExample/ParallaExample.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/colors"; 2 | 3 | .root { 4 | position: relative; 5 | background-color: black; 6 | width: 300vw; 7 | } 8 | 9 | .artist { 10 | position: fixed; 11 | right: 10px; 12 | bottom: 10px; 13 | text-align: right; 14 | color: rgb(190, 102, 87); 15 | font-family: monospace; 16 | z-index: 10; 17 | } 18 | 19 | .layer { 20 | position: absolute; 21 | top: 0; 22 | bottom: 0; 23 | background-size: auto 100%; 24 | background-repeat: repeat-x; 25 | height: 100vh; 26 | } 27 | -------------------------------------------------------------------------------- /horizontal-scroll/components/ParallaxExample/ParallaxExample.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import { useParallax } from "react-scroll-parallax"; 3 | import imageBg from "../../image/parallax-demon-woods-bg.png"; 4 | import imageClose from "../../image/parallax-demon-woods-close-trees.png"; 5 | import imageMid from "../../image/parallax-demon-woods-mid-trees.png"; 6 | import imageFar from "../../image/parallax-demon-woods-far-trees.png"; 7 | 8 | import * as styles from "./ParallaExample.module.scss"; 9 | 10 | export default function ParallaxExample() { 11 | const target = useRef(null); 12 | 13 | const mid = useParallax({ 14 | speed: 50, 15 | targetElement: target.current, 16 | }); 17 | const close = useParallax({ 18 | speed: 100, 19 | targetElement: target.current, 20 | }); 21 | 22 | const midExtend = 50 * 5 * -1; 23 | const closeExtend = 100 * 5 * -1; 24 | 25 | return ( 26 |
27 | 32 | Art by Aethrall 33 | 34 |
35 |
39 |
47 |
56 |
65 |
66 |
67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /horizontal-scroll/components/index.js: -------------------------------------------------------------------------------- 1 | import ParallaxExample from "./ParallaxExample/ParallaxExample"; 2 | import App from "./App/App"; 3 | 4 | export { ParallaxExample, App }; 5 | -------------------------------------------------------------------------------- /horizontal-scroll/image/parallax-demon-woods-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/horizontal-scroll/image/parallax-demon-woods-bg.png -------------------------------------------------------------------------------- /horizontal-scroll/image/parallax-demon-woods-close-trees.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/horizontal-scroll/image/parallax-demon-woods-close-trees.png -------------------------------------------------------------------------------- /horizontal-scroll/image/parallax-demon-woods-far-trees.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/horizontal-scroll/image/parallax-demon-woods-far-trees.png -------------------------------------------------------------------------------- /horizontal-scroll/image/parallax-demon-woods-mid-trees.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/horizontal-scroll/image/parallax-demon-woods-mid-trees.png -------------------------------------------------------------------------------- /horizontal-scroll/index.css: -------------------------------------------------------------------------------- 1 | .star { 2 | position: fixed; 3 | top: 1em; 4 | right: 1em; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | -------------------------------------------------------------------------------- /horizontal-scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React Scroll Parallax 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 19 | 20 | 21 | 25 | 29 | 30 | 31 | 32 |
33 |
34 | Star 41 |
42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /horizontal-scroll/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App/App"; 4 | 5 | const root = document.getElementById("root"); 6 | 7 | ReactDOM.render(, root); 8 | -------------------------------------------------------------------------------- /horizontal-scroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "horizontal-scroll", 3 | "version": "1.0.0", 4 | "author": "J Scott Smith", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "yarn parcel index.html", 8 | "build": "yarn parcel build index.html" 9 | }, 10 | "devDependencies": { 11 | "@parcel/transformer-inline-string": "^2.2.1", 12 | "@parcel/transformer-sass": "^2.2.1", 13 | "gh-pages": "^3.2.3", 14 | "parcel": "^2.2.1" 15 | }, 16 | "dependencies": { 17 | "react": "^17.0.2", 18 | "react-dom": "^17.0.2", 19 | "react-scroll-parallax": "^3.0.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /horizontal-scroll/styles/colors.scss: -------------------------------------------------------------------------------- 1 | $plum: #3d3547; 2 | $purple: #a179af; 3 | $tan: #edeaea; -------------------------------------------------------------------------------- /mountains/README.md: -------------------------------------------------------------------------------- 1 | # Parallax Example: Mountains 2 | -------------------------------------------------------------------------------- /mountains/components/App/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ParallaxProvider } from "react-scroll-parallax"; 3 | import { ParallaxProvider, ParallaxBanner } from "react-scroll-parallax"; 4 | 5 | import bg1 from "../../image/bg-1.jpg"; 6 | import bg2 from "../../image/bg-2.png"; 7 | import bg3 from "../../image/bg-3.png"; 8 | import bg4 from "../../image/bg-4.png"; 9 | import bg5 from "../../image/bg-5.png"; 10 | 11 | import "../../index.css"; 12 | 13 | export default function App() { 14 | return ( 15 |
16 | 17 |
18 | 57 |
58 | 59 |
60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /mountains/components/index.js: -------------------------------------------------------------------------------- 1 | import ParallaxExample from "./ParallaxExample/ParallaxExample"; 2 | import App from "./App/App"; 3 | 4 | export { ParallaxExample, App }; 5 | -------------------------------------------------------------------------------- /mountains/image/bg-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/mountains/image/bg-1.jpg -------------------------------------------------------------------------------- /mountains/image/bg-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/mountains/image/bg-2.png -------------------------------------------------------------------------------- /mountains/image/bg-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/mountains/image/bg-3.png -------------------------------------------------------------------------------- /mountains/image/bg-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/mountains/image/bg-4.png -------------------------------------------------------------------------------- /mountains/image/bg-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/mountains/image/bg-5.png -------------------------------------------------------------------------------- /mountains/index.css: -------------------------------------------------------------------------------- 1 | .star { 2 | position: fixed; 3 | top: 1em; 4 | right: 1em; 5 | z-index: 999; 6 | } 7 | 8 | html, 9 | body { 10 | padding: 0; 11 | margin: 0; 12 | background: #40255b; 13 | } 14 | 15 | main { 16 | height: 300vh; 17 | } 18 | 19 | p { 20 | font-family: helvetica, sans-serif; 21 | color: #eee; 22 | } 23 | 24 | .banner { 25 | height: 100vh; 26 | background: #bbe8f6; 27 | } 28 | -------------------------------------------------------------------------------- /mountains/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mountains | React Scroll Parallax 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 19 | 20 | 21 | 25 | 26 | 27 | 28 |
29 |
30 | Star 37 |
38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /mountains/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App/App"; 4 | 5 | const root = document.getElementById("root"); 6 | 7 | ReactDOM.render(, root); 8 | -------------------------------------------------------------------------------- /mountains/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mountains", 3 | "version": "1.0.0", 4 | "author": "J Scott Smith", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "yarn parcel index.html", 8 | "build": "yarn parcel build index.html" 9 | }, 10 | "devDependencies": { 11 | "@parcel/transformer-inline-string": "^2.2.1", 12 | "@parcel/transformer-sass": "^2.2.1", 13 | "gh-pages": "^3.2.3", 14 | "parcel": "^2.2.1" 15 | }, 16 | "dependencies": { 17 | "classnames": "^2.3.1", 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2", 20 | "react-scroll-parallax": "^3.0.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /original/README.md: -------------------------------------------------------------------------------- 1 | # Parallax Example Site 2 | 3 | The original example site using `react-scroll-parallax` upgraded to version 3. 4 | 5 | 🔗 [View Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/dist/) 6 | 7 | - Made with [react-scroll-parallax v3](https://github.com/jscottsmith/react-scroll-parallax) 8 | - Now with better [documentation](https://react-scroll-parallax.damnthat.tv) 9 | - Check it out [on NPM](https://www.npmjs.com/package/react-scroll-parallax) 10 | 11 | ## Dev 12 | 13 | Packed with [parcel](https://parceljs.org/). Use `yarn start` to run locally. 14 | -------------------------------------------------------------------------------- /original/components/App/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { ParallaxProvider } from "react-scroll-parallax"; 3 | import { ParallaxExample } from "../"; 4 | 5 | export default class App extends Component { 6 | render() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /original/components/Intro/Intro.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Parallax } from "react-scroll-parallax"; 3 | import * as style from "./Intro.module.scss"; 4 | import { Svg } from "../"; 5 | import ring from "bundle-text:./ring-of-dots.svg"; 6 | import hemispheres from "bundle-text:./hemispheres.svg"; 7 | 8 | const Intro = () => ( 9 |
10 |
11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | 20 |
21 |

Scroll

22 |
23 | ); 24 | 25 | export default Intro; 26 | -------------------------------------------------------------------------------- /original/components/Intro/Intro.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/colors"; 2 | 3 | .root { 4 | display: flex; 5 | flex-flow: row wrap; 6 | align-items: center; 7 | justify-content: center; 8 | height: 100vh; 9 | } 10 | 11 | .scroll { 12 | position: absolute; 13 | bottom: 5em; 14 | left: 50%; 15 | transform: translateX(-50%); 16 | color: $plum; 17 | font-weight: 500; 18 | } 19 | 20 | .container { 21 | position: relative; 22 | width: 25em; 23 | } 24 | 25 | .ring { 26 | position: relative; 27 | z-index: 2; 28 | } 29 | 30 | .circle { 31 | position: absolute; 32 | top: 15%; 33 | left: 15%; 34 | width: 70%; 35 | height: 70%; 36 | z-index: 1; 37 | 38 | .parallaxInner { 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | border: 3px solid $plum; 45 | border-radius: 50%; 46 | } 47 | } 48 | 49 | .circleInner { 50 | position: absolute; 51 | top: 0; 52 | left: 0; 53 | width: 100%; 54 | height: 100%; 55 | border: 3px solid $plum; 56 | border-radius: 50%; 57 | } 58 | 59 | .hemispheres { 60 | position: absolute; 61 | top: 25%; 62 | left: 25%; 63 | width: 50%; 64 | } 65 | -------------------------------------------------------------------------------- /original/components/Intro/hemispheres.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /original/components/Intro/ring-of-dots.svg: -------------------------------------------------------------------------------- 1 | 3 | 5 | 6 | -------------------------------------------------------------------------------- /original/components/IntroCopy/IntroCopy.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import * as style from "./IntroCopy.module.scss"; 3 | import { Parallax } from "react-scroll-parallax"; 4 | 5 | const copy = "Parallax".split(""); 6 | 7 | const IntroCopy = () => ( 8 |
9 |
10 | 11 | {copy.map((letter, i) => ( 12 | 17 | {letter} 18 | 19 | ))} 20 | 21 |
22 |
23 | ); 24 | 25 | export default IntroCopy; 26 | -------------------------------------------------------------------------------- /original/components/IntroCopy/IntroCopy.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/colors"; 2 | 3 | .root { 4 | display: flex; 5 | flex-flow: column wrap; 6 | align-items: space-around; 7 | justify-content: center; 8 | align-items: center; 9 | height: 50vh; 10 | } 11 | 12 | .copy { 13 | margin: 0.2em 0; 14 | text-align: center; 15 | } 16 | 17 | .barTop { 18 | margin-left: 0.8em; 19 | width: 20em; 20 | height: 1.5em; 21 | border-top: 0.45em solid $purple; 22 | border-bottom: 0.45em solid $purple; 23 | transform: skew(-10deg); 24 | } 25 | 26 | .barBottom { 27 | width: 20em; 28 | height: 1.5em; 29 | border-top: 0.45em solid $purple; 30 | border-bottom: 0.45em solid $purple; 31 | transform: skew(-10deg); 32 | margin-left: 0; 33 | margin-right: 0.8em; 34 | } 35 | 36 | .letter { 37 | display: inline-block; 38 | } 39 | -------------------------------------------------------------------------------- /original/components/Marquee/Marquee.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import * as style from "./Marquee.module.scss"; 3 | import { Svg } from "../"; 4 | import { Parallax } from "react-scroll-parallax"; 5 | import boxBg from "bundle-text:./box-bg.svg"; 6 | import boxOutline from "bundle-text:./box-outline.svg"; 7 | import divider from "bundle-text:../shared/divider.svg"; 8 | 9 | const Marquee = () => ( 10 |
11 | 12 |
13 | 14 | 19 | Horizontal 20 | 21 | 22 | 23 | 24 |
25 |
26 | ); 27 | 28 | export default Marquee; 29 | -------------------------------------------------------------------------------- /original/components/Marquee/Marquee.module.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Marquee 3 | // --------------------------- 4 | 5 | @import "../../styles/colors"; 6 | 7 | .root { 8 | position: relative; 9 | display: flex; 10 | flex-flow: column wrap; 11 | justify-content: space-between; 12 | align-items: center; 13 | min-height: 50vh; 14 | margin-bottom: 50vh; 15 | } 16 | 17 | .divider { 18 | display: block; 19 | width: 100%; 20 | margin-top: 25vh; 21 | margin-bottom: 25vh; 22 | } 23 | 24 | .container { 25 | position: relative; 26 | width: 40em; 27 | } 28 | 29 | .boxOutline { 30 | position: absolute; 31 | top: 20%; 32 | right: 7%; 33 | width: 100%; 34 | height: 100%; 35 | z-index: 1; 36 | } 37 | 38 | .boxBg { 39 | width: 100%; 40 | } 41 | 42 | .text { 43 | position: absolute; 44 | top: 28%; 45 | left: 0; 46 | width: 100%; 47 | text-align: center; 48 | } 49 | -------------------------------------------------------------------------------- /original/components/Marquee/box-bg.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/Marquee/box-outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /original/components/Overlap/Overlap.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import * as style from "./Overlap.module.scss"; 3 | import { Svg } from ".."; 4 | import { Parallax } from "react-scroll-parallax"; 5 | import circle from "bundle-text:./circle.svg"; 6 | import circleRings from "bundle-text:./circle-rings.svg"; 7 | 8 | const Overlap = () => ( 9 |
10 |
11 | 12 | 13 | 14 | 19 | 20 | 21 |
22 |
23 | ); 24 | 25 | export default Overlap; 26 | -------------------------------------------------------------------------------- /original/components/Overlap/Overlap.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/colors"; 2 | 3 | .root { 4 | position: relative; 5 | display: flex; 6 | flex-flow: column wrap; 7 | align-items: space-around; 8 | justify-content: center; 9 | align-items: center; 10 | padding-top: 25vh; 11 | z-index: 1; 12 | } 13 | 14 | .container { 15 | position: relative; 16 | width: 30em; 17 | } 18 | 19 | .circleRings { 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | } 25 | -------------------------------------------------------------------------------- /original/components/Overlap/circle-rings.svg: -------------------------------------------------------------------------------- 1 | 3 | 5 | 6 | 8 | 10 | 13 | 15 | 18 | 20 | 23 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /original/components/Overlap/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /original/components/ParallaxExample/ParallaExample.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/colors"; 2 | 3 | .root { 4 | background-color: $tan; 5 | } 6 | 7 | :global { 8 | body { 9 | margin: 0; 10 | font-family: "Roboto Mono", san-serif; 11 | color: $tan; 12 | font-size: 12px; 13 | font-weight: 300; 14 | } 15 | 16 | h1, 17 | .h1 { 18 | text-transform: uppercase; 19 | font-size: 4em; 20 | font-weight: 700; 21 | font-style: italic; 22 | letter-spacing: 0.3em; 23 | color: $plum; 24 | } 25 | 26 | code { 27 | display: inline-block; 28 | margin: 0 0.4em 0 0; 29 | font-family: "Roboto Mono", san-serif; 30 | background-color: lighten($plum, 10%); 31 | padding: 0.2em 0.4em; 32 | border-radius: 3px; 33 | } 34 | 35 | p { 36 | margin: 2em 0; 37 | font-size: 1.2em; 38 | line-height: 1.6; 39 | color: darken($tan, 15%); 40 | } 41 | 42 | * { 43 | box-sizing: border-box; 44 | } 45 | 46 | a { 47 | color: $tan; 48 | text-decoration: none; 49 | font-weight: bold; 50 | &:hover { 51 | color: $purple; 52 | } 53 | } 54 | 55 | hr { 56 | width: 100%; 57 | height: 3em; 58 | background-color: #fff; 59 | border: none; 60 | } 61 | 62 | .btn { 63 | display: inline-block; 64 | border: 2px solid $purple; 65 | padding: 0.6em 1em; 66 | color: $purple; 67 | font-weight: 500; 68 | margin-right: 1em; 69 | 70 | &:hover { 71 | background-color: $purple; 72 | color: $tan; 73 | } 74 | } 75 | 76 | .visually-hidden { 77 | position: absolute; 78 | top: 0; 79 | left: 0; 80 | height: 0; 81 | width: 0; 82 | overflow: hidden; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /original/components/ParallaxExample/ParallaxExample.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { 3 | Intro, 4 | IntroCopy, 5 | Marquee, 6 | TriangleGrid, 7 | Overlap, 8 | Svg, 9 | ShapeField, 10 | } from "../"; 11 | 12 | import * as style from "./ParallaExample.module.scss"; 13 | 14 | import noisePattern from "bundle-text:../shared/noise-pattern.svg"; 15 | import dotPattern from "bundle-text:../shared/dot-pattern.svg"; 16 | 17 | export default class ParallaxExample extends Component { 18 | render() { 19 | return ( 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | {/** Shared SVG patterns */} 29 |
30 | 31 | 32 |
33 | 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /original/components/ShapeField/ShapeField.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Parallax } from "react-scroll-parallax"; 3 | import { Svg } from "../"; 4 | 5 | import * as style from "./ShapeField.module.scss"; 6 | 7 | import cluster01HemiLeft from "bundle-text:./cluster-01-hemi-left.svg"; 8 | import cluster01HemiRight from "bundle-text:./cluster-01-hemi-right.svg"; 9 | import cluster01Rect from "bundle-text:./cluster-01-rect.svg"; 10 | 11 | import cluster02Hemi from "bundle-text:./cluster-02-hemi.svg"; 12 | import cluster02TriangleBig from "bundle-text:./cluster-02-triangle-big.svg"; 13 | import cluster02TriangleSmall from "bundle-text:./cluster-02-triangle-small.svg"; 14 | 15 | import cluster03TriangleTop from "bundle-text:./cluster-03-triangle-top.svg"; 16 | import cluster03TriangleBottom from "bundle-text:./cluster-03-triangle-bottom.svg"; 17 | import cluster03TriangleBig from "bundle-text:./cluster-03-triangle-big.svg"; 18 | 19 | import cluster04Triangle from "bundle-text:./cluster-04-triangle.svg"; 20 | import cluster04Square from "bundle-text:./cluster-04-square.svg"; 21 | import cluster04HemiRight from "bundle-text:./cluster-04-hemi-right.svg"; 22 | 23 | export default class ShapeField extends Component { 24 | render() { 25 | return ( 26 |
27 |
28 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 | 41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
61 | 62 |
63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 |
72 | ); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /original/components/ShapeField/ShapeField.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/colors"; 2 | 3 | .root { 4 | position: relative; 5 | margin-top: 25vh; 6 | height: 75vh; 7 | } 8 | 9 | .shapeCluster01 { 10 | position: absolute; 11 | top: 0%; 12 | left: 40%; 13 | width: 8em; 14 | 15 | .hemiLeft { 16 | position: absolute; 17 | right: 0; 18 | top: 0; 19 | width: 50%; 20 | } 21 | 22 | .hemiRight { 23 | position: absolute; 24 | left: 0; 25 | bottom: 0; 26 | width: 50%; 27 | } 28 | } 29 | 30 | .shapeCluster02 { 31 | position: absolute; 32 | left: 5%; 33 | top: 25%; 34 | width: 18em; 35 | height: 30em; 36 | 37 | .triangleBig { 38 | position: absolute; 39 | left: 0; 40 | top: 20%; 41 | width: 60%; 42 | } 43 | 44 | .triangleSmall { 45 | position: absolute; 46 | right: 0; 47 | top: 0; 48 | width: 60%; 49 | } 50 | 51 | .hemi { 52 | position: absolute; 53 | right: 0; 54 | bottom: 30%; 55 | width: 40%; 56 | } 57 | } 58 | 59 | .shapeCluster03 { 60 | position: absolute; 61 | top: 90%; 62 | left: 45%; 63 | width: 17em; 64 | height: 10em; 65 | 66 | .triangleTop { 67 | position: absolute; 68 | left: 0; 69 | bottom: 0; 70 | width: 100%; 71 | } 72 | .triangleBottom { 73 | position: absolute; 74 | left: 0; 75 | bottom: 0; 76 | width: 100%; 77 | } 78 | .triangleBig { 79 | position: absolute; 80 | left: 0; 81 | bottom: 0; 82 | width: 80%; 83 | } 84 | } 85 | 86 | .shapeCluster04 { 87 | position: absolute; 88 | top: 25%; 89 | right: 5%; 90 | width: 16em; 91 | 92 | .triangle { 93 | position: absolute; 94 | width: 66.666%; 95 | top: 0; 96 | left: 0; 97 | } 98 | .square { 99 | position: absolute; 100 | width: 66.666%; 101 | right: 0; 102 | top: 0; 103 | } 104 | .hemiRight { 105 | position: absolute; 106 | width: 33.333%; 107 | right: 0; 108 | top: 0; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-01-hemi-left.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-01-hemi-right.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-01-rect.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-02-hemi.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-02-triangle-big.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-02-triangle-small.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-02-triangle.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-03-triangle-big.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-03-triangle-bottom.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-03-triangle-top.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-04-hemi-right.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-04-square.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/ShapeField/cluster-04-triangle.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /original/components/Svg/Svg.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import * as style from "./Svg.module.scss"; 4 | 5 | export default function Svg(props) { 6 | const Element = props.el; 7 | const className = 8 | `svg-container ${style.root}` + 9 | (props.className ? ` ${props.className}` : ""); 10 | 11 | return ( 12 | 17 | ); 18 | } 19 | 20 | Svg.defaultProps = { 21 | el: "span", 22 | }; 23 | -------------------------------------------------------------------------------- /original/components/Svg/Svg.module.scss: -------------------------------------------------------------------------------- 1 | .root { 2 | display: block; 3 | svg { 4 | display: block; 5 | width: 100%; 6 | height: auto; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /original/components/TriangleGrid/TriangleGrid.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import * as style from "./TriangleGrid.module.scss"; 3 | import { Svg } from ".."; 4 | import { Parallax } from "react-scroll-parallax"; 5 | import gridPurple from "bundle-text:./grid-purple.svg"; 6 | import gridWhite from "bundle-text:./grid-white.svg"; 7 | import angleTop from "bundle-text:../shared/angle-dark-top.svg"; 8 | 9 | const TriangleGrid = () => ( 10 |
11 | 12 |
13 |

React Scroll Parallax

14 |

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

18 |

19 | Utilizes{" "} 20 | 21 | Parallax Controller 22 | {" "} 23 | to add vertical or horizontal scrolling based effects to elements.{" "} 24 |

25 |

26 | 27 | Optimized 28 | {" "} 29 | to reduce jank on scroll and works with SSR and SSG rendered React apps. 30 |

31 |

32 | yarn add react-scroll-parallax 33 | npm i react-scroll-parallax 34 |

35 |

36 | 37 | Documentation 38 | 39 | 43 | GitHub 44 | 45 | 49 | View on NPM 50 | 51 |

52 |
53 |
54 | 55 | 56 | 57 | 58 | 59 | 60 |
61 |
62 | ); 63 | 64 | export default TriangleGrid; 65 | -------------------------------------------------------------------------------- /original/components/TriangleGrid/TriangleGrid.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/colors"; 2 | 3 | .root { 4 | position: relative; 5 | display: flex; 6 | flex-flow: row nowrap; 7 | justify-content: flex-end; 8 | align-items: center; 9 | padding: 25vh 2em; 10 | background-color: $plum; 11 | } 12 | 13 | .container { 14 | position: relative; 15 | width: 25em; 16 | margin-right: 10vw; 17 | flex-shrink: 0; 18 | } 19 | 20 | .angleTop { 21 | position: absolute; 22 | bottom: 100%; 23 | left: 0; 24 | right: 0; 25 | } 26 | 27 | .headline { 28 | font-size: 2em; 29 | color: $purple; 30 | } 31 | 32 | .copy { 33 | margin: 0 auto; 34 | flex-grow: 1; 35 | text-align: left; 36 | max-width: 500px; 37 | 38 | code { 39 | padding: 0.4em 1em; 40 | font-size: 0.8em; 41 | color: white; 42 | } 43 | } 44 | 45 | .trianglesPurple { 46 | position: absolute; 47 | top: 0; 48 | left: 0; 49 | right: 0; 50 | } 51 | -------------------------------------------------------------------------------- /original/components/TriangleGrid/grid-purple.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /original/components/TriangleGrid/grid-white.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /original/components/index.js: -------------------------------------------------------------------------------- 1 | import Intro from "./Intro/Intro"; 2 | import IntroCopy from "./IntroCopy/IntroCopy"; 3 | import Marquee from "./Marquee/Marquee"; 4 | import ParallaxExample from "./ParallaxExample/ParallaxExample"; 5 | import Svg from "./Svg/Svg"; 6 | import ShapeField from "./ShapeField/ShapeField"; 7 | import Overlap from "./Overlap/Overlap"; 8 | import TriangleGrid from "./TriangleGrid/TriangleGrid"; 9 | import App from "./App/App"; 10 | 11 | export { 12 | Intro, 13 | IntroCopy, 14 | Marquee, 15 | ParallaxExample, 16 | Svg, 17 | ShapeField, 18 | Overlap, 19 | TriangleGrid, 20 | App, 21 | }; 22 | -------------------------------------------------------------------------------- /original/components/shared/angle-dark-top.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /original/components/shared/divider.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /original/components/shared/dot-pattern.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 541 | 542 | 543 | 544 | -------------------------------------------------------------------------------- /original/index.css: -------------------------------------------------------------------------------- 1 | .star { 2 | position: fixed; 3 | top: 1em; 4 | right: 1em; 5 | } 6 | -------------------------------------------------------------------------------- /original/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React Scroll Parallax 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 19 | 20 | 21 | 25 | 29 | 30 | 31 | 32 |
33 |
34 | Star 41 |
42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /original/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App/App"; 4 | 5 | const root = document.getElementById("root"); 6 | 7 | ReactDOM.render(, root); 8 | -------------------------------------------------------------------------------- /original/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "parallax-example", 3 | "version": "1.0.0", 4 | "author": "J Scott Smith", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "yarn parcel index.html", 8 | "build": "yarn parcel build index.html", 9 | "deploy": "gh-pages -d dist" 10 | }, 11 | "devDependencies": { 12 | "@parcel/transformer-inline-string": "^2.2.1", 13 | "@parcel/transformer-sass": "^2.2.1", 14 | "gh-pages": "^3.2.3", 15 | "parcel": "^2.2.1" 16 | }, 17 | "dependencies": { 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2", 20 | "react-scroll-parallax": "^3.0.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /original/styles/colors.scss: -------------------------------------------------------------------------------- 1 | $plum: #3d3547; 2 | $purple: #a179af; 3 | $tan: #edeaea; -------------------------------------------------------------------------------- /space-worms/README.md: -------------------------------------------------------------------------------- 1 | # Parallax Example Site 2 | 3 | The original example site using `react-scroll-parallax` upgraded to version 3. 4 | 5 | 🔗 [View Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/dist/) 6 | 7 | - Made with [react-scroll-parallax v3](https://github.com/jscottsmith/react-scroll-parallax) 8 | - Now with better [documentation](https://react-scroll-parallax.damnthat.tv) 9 | - Check it out [on NPM](https://www.npmjs.com/package/react-scroll-parallax) 10 | 11 | ## Dev 12 | 13 | Packed with [parcel](https://parceljs.org/). Use `yarn start` to run locally. 14 | -------------------------------------------------------------------------------- /space-worms/components/App/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { ParallaxProvider } from "react-scroll-parallax"; 3 | import { ParallaxExample } from "../"; 4 | 5 | export default class App extends Component { 6 | render() { 7 | return ( 8 | 9 |
15 | 16 | 17 | 18 | 19 |
20 | 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /space-worms/components/ParallaxExample/ParallaExample.module.scss: -------------------------------------------------------------------------------- 1 | .root { 2 | position: relative; 3 | height: 200vh; 4 | } 5 | 6 | .artist { 7 | position: fixed; 8 | right: 10px; 9 | bottom: 10px; 10 | text-align: right; 11 | color: rgb(77, 103, 114); 12 | font-family: monospace; 13 | z-index: 100; 14 | 15 | a { 16 | color: rgb(67, 99, 187); 17 | } 18 | } 19 | 20 | .layer { 21 | position: absolute; 22 | width: 120vw; 23 | height: auto; 24 | } 25 | 26 | .layer1 { 27 | top: 25%; 28 | left: -40%; 29 | z-index: 0; 30 | } 31 | .layer2 { 32 | top: -40%; 33 | left: 0%; 34 | z-index: 1; 35 | } 36 | .layer3 { 37 | top: -30%; 38 | left: 15%; 39 | z-index: 2; 40 | } 41 | .layer4 { 42 | top: -5%; 43 | left: -25%; 44 | z-index: 3; 45 | } 46 | .layer5 { 47 | top: -30%; 48 | left: -30%; 49 | z-index: 4; 50 | } 51 | .layer6 { 52 | top: 20%; 53 | left: 20%; 54 | z-index: 5; 55 | } 56 | -------------------------------------------------------------------------------- /space-worms/components/ParallaxExample/ParallaxExample.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import { useParallax } from "react-scroll-parallax"; 3 | import cx from "classnames"; 4 | import { Spaceworms } from "../Spaceworms"; 5 | 6 | import worm1 from "../../image/worm-1.png"; 7 | import worm2 from "../../image/worm-2.png"; 8 | import worm3 from "../../image/worm-3.png"; 9 | import worm4 from "../../image/worm-4.png"; 10 | import worm5 from "../../image/worm-5.png"; 11 | import worm6 from "../../image/worm-6.png"; 12 | 13 | import * as styles from "./ParallaExample.module.scss"; 14 | 15 | export default function ParallaxExample() { 16 | const target = useRef(); 17 | 18 | const parallax1 = useParallax({ 19 | speed: -40, 20 | rotate: [-30, 30], 21 | }); 22 | const parallax2 = useParallax({ 23 | speed: -20, 24 | rotate: [-30, 50], 25 | }); 26 | const parallax3 = useParallax({ 27 | speed: 10, 28 | rotate: [-60, 0], 29 | }); 30 | const parallax4 = useParallax({ 31 | speed: 20, 32 | rotate: [-30, 50], 33 | }); 34 | const parallax5 = useParallax({ 35 | speed: 40, 36 | rotate: [-30, 30], 37 | }); 38 | const parallax6 = useParallax({ 39 | speed: 60, 40 | rotate: [-30, 50], 41 | }); 42 | 43 | return ( 44 |
45 |

46 | Art adapted from{" "} 47 | 52 | Spaceworms 53 | {" "} 54 | by{" "} 55 | 60 | Fons Mans 61 | 62 |

63 |
64 |
74 | 75 | 76 | 77 | 78 | 79 |
80 | parallax1.controller.update()} 85 | draggable={false} 86 | /> 87 | parallax2.controller.update()} 92 | draggable={false} 93 | /> 94 | parallax3.controller.update()} 99 | draggable={false} 100 | /> 101 | parallax4.controller.update()} 106 | draggable={false} 107 | /> 108 | parallax5.controller.update()} 113 | draggable={false} 114 | /> 115 | parallax6.controller.update()} 120 | draggable={false} 121 | /> 122 |
123 |
124 | ); 125 | } 126 | -------------------------------------------------------------------------------- /space-worms/components/Spaceworms/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParallax } from "react-scroll-parallax"; 3 | import * as styles from "./index.module.scss"; 4 | 5 | export const Spaceworms = (props) => { 6 | const text = useParallax({ 7 | translateX: [10, -50], 8 | }); 9 | return ( 10 |
16 |
SPACEWORMS
17 |
18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /space-worms/components/Spaceworms/index.module.scss: -------------------------------------------------------------------------------- 1 | .text { 2 | position: relative; 3 | color: white; 4 | font-weight: 900; 5 | font-family: "futura-pt", futura, sans-serif; 6 | font-size: 25vw; 7 | line-height: 0.7; 8 | white-space: nowrap; 9 | } 10 | -------------------------------------------------------------------------------- /space-worms/components/index.js: -------------------------------------------------------------------------------- 1 | import ParallaxExample from "./ParallaxExample/ParallaxExample"; 2 | import App from "./App/App"; 3 | 4 | export { ParallaxExample, App }; 5 | -------------------------------------------------------------------------------- /space-worms/image/worm-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/space-worms/image/worm-1.png -------------------------------------------------------------------------------- /space-worms/image/worm-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/space-worms/image/worm-2.png -------------------------------------------------------------------------------- /space-worms/image/worm-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/space-worms/image/worm-3.png -------------------------------------------------------------------------------- /space-worms/image/worm-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/space-worms/image/worm-4.png -------------------------------------------------------------------------------- /space-worms/image/worm-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/space-worms/image/worm-5.png -------------------------------------------------------------------------------- /space-worms/image/worm-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jscottsmith/react-scroll-parallax-examples/1568425551685db0dd38b9d0125bb2339f9efef2/space-worms/image/worm-6.png -------------------------------------------------------------------------------- /space-worms/index.css: -------------------------------------------------------------------------------- 1 | .star { 2 | position: fixed; 3 | top: 1em; 4 | right: 1em; 5 | z-index: 999; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | -------------------------------------------------------------------------------- /space-worms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Spaceworms | React Scroll Parallax 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 | Star 39 |
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /space-worms/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App/App"; 4 | 5 | const root = document.getElementById("root"); 6 | 7 | ReactDOM.render(, root); 8 | -------------------------------------------------------------------------------- /space-worms/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "horizontal-scroll", 3 | "version": "1.0.0", 4 | "author": "J Scott Smith", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "yarn parcel index.html", 8 | "build": "yarn parcel build index.html" 9 | }, 10 | "devDependencies": { 11 | "@parcel/transformer-inline-string": "^2.2.1", 12 | "@parcel/transformer-sass": "^2.2.1", 13 | "gh-pages": "^3.2.3", 14 | "parcel": "^2.2.1" 15 | }, 16 | "dependencies": { 17 | "classnames": "^2.3.1", 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2", 20 | "react-scroll-parallax": "^3.0.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /test-offsets/README.md: -------------------------------------------------------------------------------- 1 | # Parallax Example Site 2 | 3 | The original example site using `react-scroll-parallax` upgraded to version 3. 4 | 5 | 🔗 [View Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/dist/) 6 | 7 | - Made with [react-scroll-parallax v3](https://github.com/jscottsmith/react-scroll-parallax) 8 | - Now with better [documentation](https://react-scroll-parallax.damnthat.tv) 9 | - Check it out [on NPM](https://www.npmjs.com/package/react-scroll-parallax) 10 | 11 | ## Dev 12 | 13 | Packed with [parcel](https://parceljs.org/). Use `yarn start` to run locally. 14 | -------------------------------------------------------------------------------- /test-offsets/components/App/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { ParallaxProvider } from "react-scroll-parallax"; 3 | import { ParallaxTest } from "../"; 4 | 5 | export class App extends Component { 6 | render() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /test-offsets/components/ParallaxTest/ParallaxTest.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Parallax } from "react-scroll-parallax"; 3 | import * as style from "./ParallaxTest.module.scss"; 4 | 5 | const INC_AMOUNT = 10; 6 | const START_NUM_ELEMENTS = 10; 7 | 8 | export class ParallaxTest extends React.Component { 9 | state = { 10 | elements: new Array(START_NUM_ELEMENTS).fill(null).map((x, i) => i), 11 | offsetY: INC_AMOUNT, 12 | slowerScrollRate: false, 13 | unitPercent: false, 14 | disabled: false, 15 | }; 16 | 17 | handleAdd = () => { 18 | const elements = [...this.state.elements, this.state.elements.length]; 19 | this.setState({ 20 | elements, 21 | }); 22 | }; 23 | 24 | handleRemove = () => { 25 | const elements = this.state.elements.slice( 26 | 0, 27 | this.state.elements.length - 1 28 | ); 29 | this.setState({ 30 | elements, 31 | }); 32 | }; 33 | 34 | increaseOffsetY = () => { 35 | const offsetY = this.state.offsetY + INC_AMOUNT; 36 | this.setState({ 37 | offsetY, 38 | }); 39 | }; 40 | 41 | decreaseOffsetY = () => { 42 | const offsetY = 43 | this.state.offsetY - INC_AMOUNT < 0 ? 0 : this.state.offsetY - INC_AMOUNT; 44 | this.setState({ 45 | offsetY, 46 | }); 47 | }; 48 | 49 | toggleSpeed = () => { 50 | const slowerScrollRate = !this.state.slowerScrollRate; 51 | this.setState({ 52 | slowerScrollRate, 53 | }); 54 | }; 55 | 56 | toggleValue = () => { 57 | const unitPercent = !this.state.unitPercent; 58 | this.setState({ 59 | unitPercent, 60 | }); 61 | }; 62 | 63 | toggleDisabled = () => { 64 | const disabled = !this.state.disabled; 65 | this.setState({ 66 | disabled, 67 | }); 68 | }; 69 | 70 | mapToParallax() { 71 | const offsetY = this.state.offsetY; 72 | const slowerScrollRate = this.state.slowerScrollRate; 73 | 74 | return this.state.elements.map((number, i) => { 75 | const unit = this.state.unitPercent ? "%" : "px"; 76 | 77 | const a = offsetY * -1 * i + unit; 78 | const b = offsetY * i + unit; 79 | 80 | const translateY = slowerScrollRate ? [a, b] : [b, a]; 81 | 82 | return ( 83 | 84 | 90 | {number} 91 | 92 | 93 | ); 94 | }); 95 | } 96 | 97 | render() { 98 | return ( 99 |
100 |

{this.mapToParallax()}

101 |
102 |
103 |

104 | Parallax Elements: 105 | {this.state.elements.length} 106 |

107 | 108 | 109 |
110 |
111 |

112 | Y Offsets: 113 | 114 | {this.state.offsetY} 115 | {this.state.unitPercent ? "%" : "px"} 116 | 117 |

118 | 119 | 120 |
121 |
122 |

123 | translatY: 124 | 125 | {this.state.slowerScrollRate 126 | ? `[-${this.state.offsetY}${ 127 | this.state.unitPercent ? "%" : "px" 128 | }, ${this.state.offsetY}${ 129 | this.state.unitPercent ? "%" : "px" 130 | }]` 131 | : `[${this.state.offsetY}${ 132 | this.state.unitPercent ? "%" : "px" 133 | }, -${this.state.offsetY}${ 134 | this.state.unitPercent ? "%" : "px" 135 | }]`} 136 | {/* {this.state.slowerScrollRate ? "Slower" : "Faster"} */} 137 | 138 |

139 | 142 |
143 |
144 |

145 | Unit: 146 | 147 | {this.state.unitPercent ? "Percent" : "Pixels"} 148 | 149 |

150 | 153 |
154 |
155 |

156 | Disabled: 157 | 158 | {this.state.disabled ? "True" : "False"} 159 | 160 |

161 | 164 |
165 |
166 |
167 | ); 168 | } 169 | } 170 | -------------------------------------------------------------------------------- /test-offsets/components/ParallaxTest/ParallaxTest.module.scss: -------------------------------------------------------------------------------- 1 | .parallaxTest { 2 | margin: 100vh 0; 3 | display: flex; 4 | flex-flow: row wrap; 5 | align-items: center; 6 | } 7 | 8 | .h1 { 9 | width: 100%; 10 | font-size: 9vw; 11 | text-align: center; 12 | } 13 | 14 | .item { 15 | display: inline-block; 16 | } 17 | 18 | .buttons { 19 | position: fixed; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | padding: 1em; 24 | } 25 | 26 | .currentState { 27 | margin-bottom: 1em; 28 | 29 | .value { 30 | margin: 0 0.5em; 31 | color: lightgreen; 32 | } 33 | 34 | button { 35 | background-color: lightblue; 36 | border-radius: 3px; 37 | border: none; 38 | cursor: pointer; 39 | font-family: "Roboto Mono", monospace; 40 | font-size: 12px; 41 | font-weight: bold; 42 | margin: 0.2em; 43 | max-width: 10em; 44 | padding: 0.2em 1em; 45 | 46 | &:hover { 47 | color: #222; 48 | background-color: lightgreen; 49 | } 50 | } 51 | } 52 | 53 | :global { 54 | body { 55 | background-color: #222; 56 | background-image: linear-gradient( 57 | 0deg, 58 | transparent 24%, 59 | #333 25%, 60 | #333 26%, 61 | transparent 27%, 62 | transparent 74%, 63 | #333 75%, 64 | #333 76%, 65 | transparent 77%, 66 | transparent 67 | ), 68 | linear-gradient( 69 | 90deg, 70 | transparent 24%, 71 | #333 25%, 72 | #333 26%, 73 | transparent 27%, 74 | transparent 74%, 75 | #333 75%, 76 | #333 76%, 77 | transparent 77%, 78 | transparent 79 | ); 80 | 81 | background-size: 50px 50px; 82 | color: #342a45; 83 | font-size: 12px; 84 | font-family: "Roboto Mono", monsopace; 85 | font-style: normal; 86 | color: #eee; 87 | } 88 | 89 | * { 90 | box-sizing: border-box; 91 | } 92 | 93 | .parallax-outer { 94 | position: relative; 95 | } 96 | 97 | .parallax-inner { 98 | position: relative; 99 | // background-color: rgba(255, 0, 0, 0.3); 100 | } 101 | 102 | // .is-in-view .parallax-inner { 103 | // background-color: rgba(0, 255, 0, 0.3); 104 | // } 105 | 106 | .parallax-outer::after, 107 | .parallax-inner::after { 108 | content: ""; 109 | position: absolute; 110 | top: 0; 111 | left: 0; 112 | right: 0; 113 | bottom: 0; 114 | border: 2px solid lightgreen; 115 | } 116 | 117 | .parallax-outer::after { 118 | border: 2px solid orangered; 119 | z-index: -1; 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /test-offsets/components/index.js: -------------------------------------------------------------------------------- 1 | export { ParallaxTest } from "./ParallaxTest/ParallaxTest.js"; 2 | export { App } from "./App/App.js"; 3 | -------------------------------------------------------------------------------- /test-offsets/index.css: -------------------------------------------------------------------------------- 1 | .star { 2 | position: fixed; 3 | top: 1em; 4 | right: 1em; 5 | } 6 | -------------------------------------------------------------------------------- /test-offsets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React Scroll Parallax 5 | 6 | 7 | 8 | 9 | 13 | 17 | 18 | 19 | 23 | 27 | 28 | 29 | 30 |
31 |
32 | Star 39 |
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /test-offsets/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { App } from "./components"; 4 | 5 | const root = document.getElementById("root"); 6 | 7 | ReactDOM.render(, root); 8 | -------------------------------------------------------------------------------- /test-offsets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "parallax-example", 3 | "version": "1.0.0", 4 | "author": "J Scott Smith", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "yarn parcel index.html", 8 | "build": "yarn parcel build index.html", 9 | "deploy": "gh-pages -d dist" 10 | }, 11 | "devDependencies": { 12 | "@parcel/transformer-inline-string": "^2.2.1", 13 | "@parcel/transformer-sass": "^2.2.1", 14 | "gh-pages": "^3.2.3", 15 | "parcel": "^2.2.1" 16 | }, 17 | "dependencies": { 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2", 20 | "react-scroll-parallax": "^3.0.0" 21 | } 22 | } 23 | --------------------------------------------------------------------------------