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 e1f6d03

Browse files
update example
1 parent 267f210 commit e1f6d03

File tree

6 files changed

+59
-32
lines changed

6 files changed

+59
-32
lines changed

‎examples/parallax-example/components/IntroCopy/IntroCopy.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const copy = 'Parallax'.split('');
1212
const IntroCopy = () => (
1313
<div className={style.root}>
1414
<div className={style.barTop} />
15-
<h1 className={style.copy}>
15+
<span className={`${style.copy} h1`}>
1616
{copy.map((letter, i) => (
1717
<Parallax
1818
key={`copy-${i}`}
@@ -22,7 +22,7 @@ const IntroCopy = () => (
2222
{letter}
2323
</Parallax>
2424
))}
25-
</h1>
25+
</span>
2626
<div className={style.barBottom} />
2727
</div>
2828
);

‎examples/parallax-example/components/Marquee/Marquee.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,15 @@ const Marquee = () => (
1010
<div className={style.root}>
1111
<Svg svg={divider} className={style.divider} />
1212
<div className={style.container}>
13-
<Svg
14-
svg={boxBg}
15-
className={style.boxBg}
16-
/>
13+
<Svg svg={boxBg} className={style.boxBg} />
1714
<Parallax
1815
className={style.text}
1916
offsetYMax={70}
2017
offsetYMin={-70}
2118
offsetXMax={-30}
2219
offsetXMin={30}
2320
>
24-
<h1>
25-
Horizontal
26-
</h1>
21+
<span className="h1">Horizontal</span>
2722
</Parallax>
2823
<Parallax
2924
className={style.boxOutline}

‎examples/parallax-example/components/ParallaxExample/ParallaExample.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
font-weight: 300;
1414
}
1515

16-
h1 {
16+
h1,
17+
.h1 {
1718
text-transform: uppercase;
1819
font-size: 4em;
1920
font-weight: 700;
@@ -23,6 +24,8 @@
2324
}
2425

2526
code {
27+
display: inline-block;
28+
margin: 0 0.4em 0 0;
2629
font-family: 'Roboto Mono', san-serif;
2730
background-color: lighten($plum, 10%);
2831
padding: 0.2em 0.4em;
@@ -32,6 +35,8 @@
3235
p {
3336
margin: 2em 0;
3437
font-size: 1.2em;
38+
line-height: 1.6;
39+
color: darken($tan, 15%);
3540
}
3641

3742
* {
@@ -59,6 +64,7 @@
5964
padding: 0.6em 1em;
6065
color: $purple;
6166
font-weight: 500;
67+
margin-right: 1em;
6268

6369
&:hover {
6470
background-color: $purple;

‎examples/parallax-example/components/TriangleGrid/TriangleGrid.js‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,51 @@ import gridWhite from '!!raw-loader!./grid-white.svg';
77
import angleTop from '!!raw-loader!../shared/angle-dark-top.svg';
88

99
const TriangleGrid = () => (
10-
<div className={style.root}>
11-
<Svg
12-
svg={angleTop}
13-
className={style.angleTop}
14-
/>
10+
<main className={style.root}>
11+
<Svg svg={angleTop} className={style.angleTop} />
1512
<article className={style.copy}>
13+
<h1 className={style.headline}>React Scroll Parallax</h1>
1614
<p>
15+
React components to create parallax scroll effects for banners,
16+
images or any other DOM elements. Uses a single scroll listener
17+
to add vertical scrolling based offsets to elements based on
18+
their position in the viewport. Optimized to reduce jank on
19+
scroll and works with universal (server-side rendered) React
20+
apps.
21+
</p>
22+
<p>
23+
<code>yarn add react-scroll-parallax</code>
1724
<code>npm i react-scroll-parallax</code>
1825
</p>
1926
<p>
20-
<a className="btn" href="https://github.com/jscottsmith/react-scroll-parallax">View on GitHub</a>
27+
<a
28+
className="btn"
29+
href="https://github.com/jscottsmith/react-scroll-parallax"
30+
>
31+
View on GitHub
32+
</a>
33+
<a
34+
className="btn"
35+
href="https://www.npmjs.com/package/react-scroll-parallax"
36+
>
37+
View on NPM
38+
</a>
2139
</p>
2240
</article>
2341
<div className={style.container}>
24-
<Parallax
25-
offsetYMax={25}
26-
offsetYMin={-25}
27-
>
28-
<Svg
29-
svg={gridPurple}
30-
className={style.trianglesPurple}
31-
/>
42+
<Parallax offsetYMax={25} offsetYMin={-25}>
43+
<Svg svg={gridPurple} className={style.trianglesPurple} />
3244
</Parallax>
3345
<Parallax
3446
offsetYMax={50}
3547
offsetYMin={-50}
3648
offsetXMax={13}
3749
offsetXMin={-13}
3850
>
39-
<Svg
40-
svg={gridWhite}
41-
className={style.trianglesWhite}
42-
/>
51+
<Svg svg={gridWhite} className={style.trianglesWhite} />
4352
</Parallax>
4453
</div>
45-
</div>
54+
</main>
4655
);
4756

4857
export default TriangleGrid;

‎examples/parallax-example/components/TriangleGrid/TriangleGrid.scss‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,20 @@
2828
right: 0;
2929
}
3030

31+
:local(.headline) {
32+
font-size: 2em;
33+
color: $purple;
34+
}
35+
3136
:local(.copy) {
3237
margin-right: 5em;
3338
flex-grow: 1;
34-
text-align: center;
39+
text-align: left;
40+
max-width: 500px;
41+
42+
code {
43+
font-size: 0.8em;
44+
}
3545
}
3646

3747
:local(.trianglesPurple) {
@@ -43,6 +53,5 @@
4353

4454
:local(.trianglesWhite) {
4555
svg {
46-
4756
}
4857
}

‎examples/parallax-example/index.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<title>React Scroll Parallax</title>
5+
46
<meta charset="UTF-8">
57
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>React Scroll Parallax</title>
8+
<meta name="author" content="J Scott Smith">
9+
<meta name="description" content="React components to create parallax scroll effects for banners, images or any other DOM elements.">
10+
11+
<!-- <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> -->
12+
<meta property="og:description" content="React components to create parallax scroll effects for banners, images or any other DOM elements.">
13+
<meta property="og:title" content="React Scroll Parallax">
14+
715
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css">
816
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,500,700i" rel="stylesheet">
917
<style>

0 commit comments

Comments
(0)

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