parallax banner stories

Author: jscottsmith

stories/Parallax/Parallax.stories.js

@@ -52,7 +52,7 @@ storiesOf('<Parallax>', module)
             </Parallax>
         </div>
     ))
-    .add('on a 100 elements', () => {
+    .add('with a 100 elements', () => {
         const amount = number('Number of Elements', 100);
         const offset = number('Offset %', 50);
         const elements = new Array(amount).fill(null).map((x, i) => i);

stories/ParallaxBanner/ParallaxBanner.scss

@@ -0,0 +1,21 @@
+:local(.parallaxChildren) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: center;
+
+    h1 {
+        color: white;
+        font-size: 4vw;
+        font-weight: normal;
+    }
+}
+
+:local(.bannerBg) {
+    background: #333;
+}

stories/ParallaxBanner/ParallaxBanner.stories.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import {
+    withKnobs,
+    text,
+    boolean,
+    number,
+    array,
+} from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import { ParallaxBanner } from 'react-scroll-parallax';
+import styles from './ParallaxBanner.scss';
+import '../styles.scss';
+
+storiesOf('<ParallaxBanner>', module)
+    .add('with a full page background', () => (
+        <ParallaxBanner
+            style={{
+                height: '100vh',
+            }}
+            className={styles.bannerBg}
+            layers={[
+                {
+                    image:
+                        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner.jpg',
+                    amount: 0.2,
+                    slowerScrollRate: false,
+                },
+            ]}
+        />
+    ))
+    .add('with a single background', () => (
+        <ParallaxBanner
+            className={styles.bannerBg}
+            layers={[
+                {
+                    image:
+                        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner.jpg',
+                    amount: 0.2,
+                    slowerScrollRate: false,
+                },
+            ]}
+        />
+    ))
+    .add('with a background and children', () => (
+        <ParallaxBanner
+            className={styles.bannerBg}
+            layers={[
+                {
+                    image:
+                        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner.jpg',
+                    amount: 0.2,
+                    slowerScrollRate: false,
+                },
+            ]}
+        >
+            <div className={styles.parallaxChildren}>
+                <h1>Headline Text</h1>
+            </div>
+        </ParallaxBanner>
+    ))
+    .add('with parallax disabled', () => (
+        <ParallaxBanner
+            className={styles.bannerBg}
+            disabled
+            layers={[
+                {
+                    image:
+                        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner.jpg',
+                    amount: 0.2,
+                    slowerScrollRate: false,
+                },
+            ]}
+        >
+            <div className={styles.parallaxChildren}>
+                <h1>Disabled Parallax</h1>
+            </div>
+        </ParallaxBanner>
+    ))
+    .add('with multiple backgrounds', () => {
+        const layers = [
+            {
+                image:
+                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/parallax-background-1.png',
+                amount: 0,
+                slowerScrollRate: false,
+            },
+            {
+                image:
+                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/parallax-background-2.png',
+                amount: 0.1,
+                slowerScrollRate: false,
+            },
+            {
+                image:
+                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/parallax-background-3.png',
+                amount: 0.2,
+                slowerScrollRate: false,
+            },
+            {
+                image:
+                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/parallax-background-4.png',
+                amount: 0.3,
+                slowerScrollRate: false,
+            },
+            {
+                image:
+                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/parallax-background-5.png',
+                amount: 0.4,
+                slowerScrollRate: false,
+            },
+        ];
+        return (
+            <ParallaxBanner
+                className={styles.bannerBg}
+                layers={layers}
+                style={{ height: '50vh' }}
+            />
+        );
+    });