Skip to content

Commit a00f3ba

Browse files
jscottsmithjscottsmith
committed
improve ParallaxTest example layout, style and ui
1 parent 3c5a487 commit a00f3ba

File tree

3 files changed

+126
-75
lines changed

3 files changed

+126
-75
lines changed

‎examples/parallax-test/components/ParallaxTest/ParallaxTest.js‎

Lines changed: 61 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,41 @@ import React from 'react';
22
import { Parallax } from 'react-scroll-parallax';
33
import style from './ParallaxTest.scss';
44

5+
const INC_AMOUNT = 10;
6+
57
export default class ParallaxTest extends React.Component {
68

79
state = {
8-
amount: [1],
9-
offset: 50,
10-
slowerScrollRate: true,
10+
amount: new Array(10).fill(null).map((x, i) => i),
11+
offsetY: INC_AMOUNT,
12+
slowerScrollRate: false,
13+
unitPercent: false,
1114
};
1215

1316
mapToParallax() {
14-
const offset = this.state.offset;
17+
const offsetY = this.state.offsetY;
1518
const slowerScrollRate = this.state.slowerScrollRate;
1619

1720
return this.state.amount.map((number, i) => {
18-
const offsetYMin = offset * -1 * i;
19-
const offsetYMax = offset * i;
20-
// console.log('min', offsetYMin, 'max', offsetYMax, 'slowerScrollRate', slowerScrollRate);
21+
const unit = this.state.unitPercent ? '%' : 'px';
22+
const offsetYMin = offsetY * -1 * i + unit;
23+
const offsetYMax = offsetY * i + unit;
24+
2125
return (
2226
<Parallax
2327
key={i}
2428
tag="span"
2529
disabled={false}
26-
offsetYMax={offset * i + 'px'}
27-
offsetYMin={offset * -1 * i + 'px'}
30+
offsetYMax={offsetYMax}
31+
offsetYMin={offsetYMin}
2832
offsetXMax={0}
2933
offsetXMin={0}
30-
className="image"
34+
className={style.item}
3135
slowerScrollRate={slowerScrollRate}
3236
>
3337
{number}
3438
</Parallax>
35-
)
39+
);
3640
});
3741
}
3842

@@ -50,42 +54,71 @@ export default class ParallaxTest extends React.Component {
5054
});
5155
};
5256

53-
increaseOffset = () => {
54-
const offset = this.state.offset + 50;
55-
// console.log('increase', offset);
57+
increaseOffsetY = () => {
58+
const offsetY = this.state.offsetY + INC_AMOUNT;
5659
this.setState({
57-
offset,
60+
offsetY,
5861
});
5962
};
6063

61-
decreaseOffset = () => {
62-
const offset = this.state.offset - 50 < 0 ? 0 : this.state.offset - 50;
63-
// console.log('decrease', offset);
64+
decreaseOffsetY = () => {
65+
const offsetY = this.state.offsetY - INC_AMOUNT < 0 ? 0 : this.state.offsetY - INC_AMOUNT;
6466
this.setState({
65-
offset,
67+
offsetY,
6668
});
6769
};
6870

6971
toggleSpeed = () => {
7072
const slowerScrollRate = !this.state.slowerScrollRate;
71-
// console.log('slower scroll rate', slowerScrollRate);
7273
this.setState({
7374
slowerScrollRate,
7475
});
7576
};
7677

78+
toggleValue = () => {
79+
const unitPercent = !this.state.unitPercent;
80+
this.setState({
81+
unitPercent,
82+
});
83+
};
84+
7785
render() {
7886
return (
79-
<div className="hello-world">
80-
<h1>
87+
<div className={style.parallaxTest}>
88+
<h1 className={style.h1}>
8189
{this.mapToParallax()}
8290
</h1>
83-
<div className="buttons">
84-
<button onClick={this.handleAdd}>Add</button>
85-
<button onClick={this.handleRemove}>Remove</button>
86-
<button onClick={this.increaseOffset}>Increase</button>
87-
<button onClick={this.decreaseOffset}>Decrease</button>
88-
<button onClick={this.toggleSpeed}>{this.state.slowerScrollRate ? 'Faster' : 'Slower'}</button>
91+
<div className={style.buttons}>
92+
<div className={style.currentState}>
93+
<h4>
94+
Parallax Elements:
95+
<span className="value">{this.state.amount.length}</span>
96+
</h4>
97+
<button onClick={this.handleAdd}>Add</button>
98+
<button onClick={this.handleRemove}>Remove</button>
99+
</div>
100+
<div className={style.currentState}>
101+
<h4>
102+
Y Offsets:
103+
<span className="value">{this.state.offsetY}</span>
104+
</h4>
105+
<button onClick={this.increaseOffsetY}>Increase</button>
106+
<button onClick={this.decreaseOffsetY}>Decrease</button>
107+
</div>
108+
<div className={style.currentState}>
109+
<h4>
110+
Speed:
111+
<span className="value">{this.state.slowerScrollRate ? 'Slower' : 'Faster'}</span>
112+
</h4>
113+
<button onClick={this.toggleSpeed}>{this.state.slowerScrollRate ? 'Faster' : 'Slower'}</button>
114+
</div>
115+
<div className={style.currentState}>
116+
<h4>
117+
Unit:
118+
<span className="value">{this.state.unitPercent ? 'Percent' : 'Pixels'}</span>
119+
</h4>
120+
<button onClick={this.toggleValue}>{this.state.unitPercent ? 'Pixels' : 'Percent'}</button>
121+
</div>
89122
</div>
90123
</div>
91124
);

‎examples/parallax-test/components/ParallaxTest/ParallaxTest.scss‎

Lines changed: 63 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,55 @@
1+
:local(.parallaxTest) {
2+
margin: 100vh 0;
3+
display: flex;
4+
flex-flow: row wrap;
5+
align-items: center;
6+
}
7+
8+
:local(.h1) {
9+
width: 100%;
10+
font-size: 9vw;
11+
text-align: center;
12+
}
13+
14+
:local(.item) {
15+
display: inline-block;
16+
}
17+
18+
:local(.buttons) {
19+
position: fixed;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
padding: 1em;
24+
}
25+
26+
:local(.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+
153
:global {
254
body {
355
background-color: #222;
@@ -24,7 +76,8 @@
2476

2577
background-size: 50px 50px;
2678
color: #342A45;
27-
font-family: 'Roboto Mono', sans-serif;
79+
font-size: 12px;
80+
font-family: 'Roboto Mono', monsopace;
2881
font-style: normal;
2982
color: #eee;
3083
}
@@ -33,26 +86,6 @@
3386
box-sizing: border-box;
3487
}
3588

36-
.hello-world {
37-
margin: 100vh 0;
38-
display: flex;
39-
flex-flow: row wrap;
40-
align-items: center;
41-
height: 300vh;
42-
}
43-
44-
h1 {
45-
width: 100%;
46-
font-size: 10vw;
47-
text-align: center;
48-
}
49-
50-
h1 > span {
51-
position: relative;
52-
display: inline-block;
53-
width: auto;
54-
}
55-
5689
.parallax-outer {
5790
position: relative;
5891
will-change: transform;
@@ -61,41 +94,26 @@
6194
.parallax-inner {
6295
position: relative;
6396
will-change: transform;
64-
background-color: rgba(255, 0, 0, 0.3);
97+
// background-color: rgba(255, 0, 0, 0.3);
6598
}
6699

67-
.parallax-outer::after {
68-
content: '';
69-
position: absolute;
70-
top: 0;
71-
left: 0;
72-
right: 0;
73-
bottom: 0;
74-
border: 2px solid orangered;
75-
}
76-
77-
.is-in-view .parallax-inner {
78-
background-color: rgba(0, 255, 0, 0.3);
79-
}
100+
// .is-in-view .parallax-inner {
101+
// background-color: rgba(0, 255, 0, 0.3);
102+
// }
80103

104+
.parallax-outer::after,
81105
.parallax-inner::after {
82106
content: '';
83107
position: absolute;
84108
top: 0;
85109
left: 0;
86110
right: 0;
87111
bottom: 0;
88-
border: 2px solid green;
89-
}
90-
91-
.test {
92-
height: 400vh;
112+
border: 2px solid lightgreen;
93113
}
94114

95-
.buttons {
96-
position: fixed;
97-
top: 0;
98-
left: 0;
99-
width: 100%;
115+
.parallax-outer::after {
116+
border: 2px solid orangered;
117+
z-index: -1;
100118
}
101119
}

‎examples/parallax-test/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Example: React Scroll Parallax</title>
6+
<title>React Scroll Parallax</title>
77
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css">
8-
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:700" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,700" rel="stylesheet">
99
</head>
1010
<body>
1111
<div id="root">$react</div>

0 commit comments

Comments
 (0)