add video and custom layer children stories #22

Author: jscottsmith

stories/ParallaxBanner/ParallaxBanner.scss

@@ -17,5 +17,32 @@
 }
 
 :local(.bannerBg) {
-    background: #333;
+    background: #fff;
+}
+
+:local(.customChild) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+}
+
+:local(.red) {
+    background-color: rgba(#f74c36, 0.8);
+}
+
+:local(.green) {
+    background-color: rgba(#35f783, 0.8);
+}
+
+:local(.blue) {
+    background-color: rgba(#42a7f4, 0.8);
+}
+
+:local(.video) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }

stories/ParallaxBanner/ParallaxBanner.stories.js

@@ -81,6 +81,72 @@ storiesOf('<ParallaxBanner>', module)
             />
         );
     })
+    .add('with a video', () => (
+        <ParallaxBanner
+            className={styles.bannerBg}
+            layers={[
+                {
+                    amount: 0.3,
+                    children: (
+                        <video
+                            className={styles.video}
+                            autoPlay
+                            loop
+                            playsInline
+                            preload="auto"
+                            muted
+                            poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/boats-at-sea.jpg"
+                            src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/boats-at-sea-720.mp4"
+                        />
+                    ),
+                    slowerScrollRate: true,
+                },
+            ]}
+        >
+            <div className={styles.parallaxChildren}>
+                <h1>Video Background</h1>
+            </div>
+        </ParallaxBanner>
+    ))
+    .add('with custom layer children', () => (
+        <ParallaxBanner
+            className={styles.bannerBg}
+            layers={[
+                {
+                    children: (
+                        <div className={`${styles.customChild} ${styles.red}`}>
+                            Red
+                        </div>
+                    ),
+                    amount: 0.2,
+                    expanded: false,
+                    slowerScrollRate: false,
+                },
+                {
+                    children: (
+                        <div
+                            className={`${styles.customChild} ${styles.green}`}
+                        >
+                            Green
+                        </div>
+                    ),
+                    amount: 0.4,
+                    expanded: false,
+                    slowerScrollRate: false,
+                },
+                {
+                    children: (
+                        <div className={`${styles.customChild} ${styles.blue}`}>
+                            Blue
+                        </div>
+                    ),
+                    amount: 0.6,
+                    expanded: false,
+                    slowerScrollRate: false,
+                },
+            ]}
+        />
+    ))
     .add('with parallax disabled', () => (
         <ParallaxBanner
             className={styles.bannerBg}