Skip to content

Commit 72638c8

Browse files
jscottsmithjscottsmith
committed
feat: add mountains example
1 parent f43c7a3 commit 72638c8

File tree

14 files changed

+4098
-0
lines changed

14 files changed

+4098
-0
lines changed

‎.github/workflows/mountains.yml

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 }}

‎mountains/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Parallax Example: Mountains

‎mountains/components/App/App.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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+
<main>
16+
<ParallaxProvider>
17+
<header>
18+
<ParallaxBanner
19+
className="banner"
20+
layers={[
21+
{
22+
image: bg1,
23+
translateY: [0, 50],
24+
shouldAlwaysCompleteAnimation: true,
25+
expanded: false,
26+
},
27+
{
28+
image: bg2,
29+
translateY: [5, 45],
30+
31+
shouldAlwaysCompleteAnimation: true,
32+
expanded: false,
33+
},
34+
{
35+
image: bg3,
36+
translateY: [10, 30],
37+
38+
shouldAlwaysCompleteAnimation: true,
39+
expanded: false,
40+
},
41+
{
42+
image: bg4,
43+
translateY: [15, 25],
44+
45+
shouldAlwaysCompleteAnimation: true,
46+
expanded: false,
47+
},
48+
{
49+
image: bg5,
50+
translateY: [20, 20],
51+
52+
shouldAlwaysCompleteAnimation: true,
53+
expanded: false,
54+
},
55+
]}
56+
/>
57+
</header>
58+
</ParallaxProvider>
59+
</main>
60+
);
61+
}

‎mountains/components/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import ParallaxExample from "./ParallaxExample/ParallaxExample";
2+
import App from "./App/App";
3+
4+
export { ParallaxExample, App };

‎mountains/image/bg-1.jpg

530 KB
Loading

‎mountains/image/bg-2.png

111 KB
Loading

‎mountains/image/bg-3.png

121 KB
Loading

‎mountains/image/bg-4.png

102 KB
Loading

‎mountains/image/bg-5.png

65.7 KB
Loading

‎mountains/index.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
}

‎mountains/index.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Mountains | React Scroll Parallax</title>
5+
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="author" content="J Scott Smith" />
9+
<meta
10+
name="description"
11+
content="React components to create parallax scroll effects for banners, images or any other DOM elements."
12+
/>
13+
14+
<!-- <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> -->
15+
<meta
16+
property="og:description"
17+
content="React components to create parallax scroll effects for banners, images or any other DOM elements."
18+
/>
19+
<meta property="og:title" content="React Scroll Parallax" />
20+
21+
<link
22+
rel="stylesheet"
23+
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css"
24+
/>
25+
<link rel="stylesheet" href="./index.css" />
26+
</head>
27+
<body>
28+
<div id="root"></div>
29+
<div class="star">
30+
<a
31+
class="github-button"
32+
href="https://github.com/jscottsmith/react-scroll-parallax"
33+
data-icon="octicon-star"
34+
aria-label="Star jscottsmith/react-scroll-parallax on GitHub"
35+
>Star</a
36+
>
37+
</div>
38+
<script type="module" src="/index.js"></script>
39+
<script async defer src="https://buttons.github.io/buttons.js"></script>
40+
</body>
41+
</html>

‎mountains/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
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(<App />, root);

‎mountains/package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
}

0 commit comments

Comments
 (0)