Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 91eb431

Browse files
feat: add horizontal scroll example
1 parent b49cb92 commit 91eb431

File tree

15 files changed

+4101
-0
lines changed

15 files changed

+4101
-0
lines changed

‎horizontal-scroll/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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.
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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+
<ParallaxProvider scrollAxis="horizontal">
9+
<ParallaxExample />
10+
</ParallaxProvider>
11+
);
12+
}
13+
}
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
}
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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+
<div>
27+
<a
28+
target="_blank"
29+
href="https://aethrall.itch.io/"
30+
className={styles.artist}
31+
>
32+
Art by Aethrall
33+
</a>
34+
<div className={styles.root} ref={target}>
35+
<div
36+
style={{ backgroundImage: `url(${imageBg})`, left: 0, right: 0 }}
37+
className={styles.layer}
38+
/>
39+
<div
40+
style={{
41+
backgroundImage: `url(${imageFar})`,
42+
left: 0,
43+
right: 0,
44+
}}
45+
className={styles.layer}
46+
/>
47+
<div
48+
style={{
49+
backgroundImage: `url(${imageMid})`,
50+
left: midExtend,
51+
right: midExtend,
52+
}}
53+
className={styles.layer}
54+
ref={mid.ref}
55+
/>
56+
<div
57+
style={{
58+
backgroundImage: `url(${imageClose})`,
59+
left: closeExtend,
60+
right: closeExtend,
61+
}}
62+
className={styles.layer}
63+
ref={close.ref}
64+
/>
65+
</div>
66+
</div>
67+
);
68+
}
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 };
947 Bytes
Loading[フレーム]
6.03 KB
Loading[フレーム]
3.89 KB
Loading[フレーム]
10.7 KB
Loading[フレーム]

‎horizontal-scroll/index.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.star {
2+
position: fixed;
3+
top: 1em;
4+
right: 1em;
5+
}
6+
7+
body {
8+
margin: 0;
9+
padding: 0;
10+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /