Skip to content

Commit 2fec55d

Browse files
jscottsmithjscottsmith
committed
add ShapeField section
1 parent 1e74218 commit 2fec55d

17 files changed

+288
-0
lines changed

‎examples/components/ParallaxExample/ParallaxExample.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
TriangleGrid,
77
Overlap,
88
Svg,
9+
ShapeField,
910
} from 'components';
1011

1112
import style from './ParallaExample.scss';
@@ -20,6 +21,7 @@ export default class ParallaxExample extends Component {
2021
<div className={style.root}>
2122
<Intro />
2223
<IntroCopy />
24+
<ShapeField />
2325
<Marquee />
2426
<Overlap />
2527
<TriangleGrid />

‎examples/components/ShapeField/ShapeField.js‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import React, { Component } from 'react';
2+
import { Parallax } from 'react-scroll-parallax';
3+
import {
4+
Svg,
5+
} from 'components';
6+
7+
import style from './ShapeField.scss';
8+
9+
import cluster01HemiLeft from '!!raw-loader!./cluster-01-hemi-left.svg';
10+
import cluster01HemiRight from '!!raw-loader!./cluster-01-hemi-right.svg';
11+
import cluster01Rect from '!!raw-loader!./cluster-01-rect.svg';
12+
13+
import cluster02Hemi from '!!raw-loader!./cluster-02-hemi.svg';
14+
import cluster02TriangleBig from '!!raw-loader!./cluster-02-triangle-big.svg';
15+
import cluster02TriangleSmall from '!!raw-loader!./cluster-02-triangle-small.svg';
16+
17+
import cluster03TriangleTop from '!!raw-loader!./cluster-03-triangle-top.svg';
18+
import cluster03TriangleBottom from '!!raw-loader!./cluster-03-triangle-bottom.svg';
19+
import cluster03TriangleBig from '!!raw-loader!./cluster-03-triangle-big.svg';
20+
21+
import cluster04Triangle from '!!raw-loader!./cluster-04-triangle.svg';
22+
import cluster04Square from '!!raw-loader!./cluster-04-square.svg';
23+
import cluster04HemiRight from '!!raw-loader!./cluster-04-hemi-right.svg';
24+
25+
export default class ShapeField extends Component {
26+
27+
render() {
28+
return (
29+
<div className={style.root}>
30+
31+
<div className={style.shapeCluster01}>
32+
<Parallax
33+
offsetYMax={100}
34+
offsetYMin={-100}
35+
className="hemi-left"
36+
slowerScrollRate
37+
>
38+
<Svg svg={cluster01HemiLeft} />
39+
</Parallax>
40+
<Svg svg={cluster01Rect} />
41+
<Parallax
42+
offsetYMax={100}
43+
offsetYMin={-100}
44+
className="hemi-right"
45+
>
46+
<Svg svg={cluster01HemiRight} />
47+
</Parallax>
48+
</div>
49+
50+
<div className={style.shapeCluster02}>
51+
<Svg
52+
svg={cluster02Hemi}
53+
className="hemi"
54+
/>
55+
<Parallax
56+
offsetYMax={30}
57+
offsetYMin={-30}
58+
className="triangle-big"
59+
>
60+
<Svg svg={cluster02TriangleBig} />
61+
</Parallax>
62+
<Parallax
63+
offsetYMax={30}
64+
offsetYMin={-30}
65+
className="triangle-small"
66+
slowerScrollRate
67+
>
68+
<Svg svg={cluster02TriangleSmall} />
69+
</Parallax>
70+
</div>
71+
72+
<div className={style.shapeCluster03}>
73+
<Parallax
74+
offsetYMax={30}
75+
offsetYMin={-30}
76+
className="triangle-top"
77+
slowerScrollRate
78+
>
79+
<Svg svg={cluster03TriangleTop} />
80+
</Parallax>
81+
82+
<Svg
83+
svg={cluster03TriangleBottom}
84+
className="triangle-top"
85+
/>
86+
<Parallax
87+
offsetYMax={30}
88+
offsetYMin={-30}
89+
className="triangle-big"
90+
slowerScrollRate
91+
>
92+
<Svg svg={cluster03TriangleBig} />
93+
</Parallax>
94+
</div>
95+
96+
<div className={style.shapeCluster04}>
97+
<Svg
98+
svg={cluster04Square}
99+
className="square"
100+
/>
101+
<Parallax
102+
offsetYMax={30}
103+
offsetYMin={-30}
104+
className="triangle"
105+
slowerScrollRate
106+
>
107+
<Svg svg={cluster04Triangle} />
108+
</Parallax>
109+
<Parallax
110+
offsetYMax={30}
111+
offsetYMin={-30}
112+
className="hemi-right"
113+
slowerScrollRate
114+
>
115+
<Svg svg={cluster04HemiRight} />
116+
</Parallax>
117+
</div>
118+
119+
</div>
120+
);
121+
}
122+
123+
}

‎examples/components/ShapeField/ShapeField.scss‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@import '../../styles/colors';
2+
3+
:local(.root) {
4+
position: relative;
5+
// background-color: red;
6+
height: 75vh;
7+
}
8+
9+
:local(.shapeCluster01) {
10+
position: absolute;
11+
top: 0%;
12+
left: 40%;
13+
width: 8em;
14+
15+
.hemi-left {
16+
position: absolute;
17+
right: 0;
18+
top: 0;
19+
width: 50%;
20+
}
21+
22+
.hemi-right {
23+
position: absolute;
24+
left: 0;
25+
bottom: 0;
26+
width: 50%;
27+
}
28+
}
29+
30+
:local(.shapeCluster02) {
31+
position: absolute;
32+
left: 5%;
33+
top: 25%;
34+
width: 18em;
35+
height: 30em;
36+
37+
.triangle-big {
38+
position: absolute;
39+
left: 0;
40+
top: 20%;
41+
width: 60%;
42+
}
43+
44+
.triangle-small {
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+
:local(.shapeCluster03) {
60+
position: absolute;
61+
top: 90%;
62+
left: 45%;
63+
width: 17em;
64+
height: 10em;
65+
66+
.triangle-top {
67+
position: absolute;
68+
left: 0;
69+
bottom: 0;
70+
width: 100%;
71+
}
72+
.triangle-bottom {
73+
position: absolute;
74+
left: 0;
75+
bottom: 0;
76+
width: 100%;
77+
}
78+
.triangle-big {
79+
position: absolute;
80+
left: 0;
81+
bottom: 0;
82+
width: 80%;
83+
}
84+
}
85+
86+
:local(.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+
.hemi-right {
105+
position: absolute;
106+
width: 33.333%;
107+
right: 0;
108+
top: 0;
109+
}
110+
}

‎examples/components/ShapeField/cluster-01-hemi-left.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎examples/components/ShapeField/cluster-01-hemi-right.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎examples/components/ShapeField/cluster-01-rect.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎examples/components/ShapeField/cluster-02-hemi.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎examples/components/ShapeField/cluster-02-triangle-big.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎examples/components/ShapeField/cluster-02-triangle-small.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎examples/components/ShapeField/cluster-02-triangle.svg‎

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)