use speed prop for parallax banner

Author: jscottsmith

docs/parallax-banner-component.md

@@ -12,11 +12,11 @@ Use the `layers` prop to indicate all images, offset amounts, and scroll rates.
   layers={[
     {
       image: 'https://foo.com/foo.jpg',
-      amount: 0.1,
+      speed: 0.1,
     },
     {
       image: 'https://foo.com/bar.png',
-      amount: 0.2,
+      speed: 0.2,
     },
   ]}
   style={{
@@ -27,7 +27,7 @@ Use the `layers` prop to indicate all images, offset amounts, and scroll rates.
 </ParallaxBanner>
 ```
 
-## Banner Props
+## Props
 
 The following are all props that can be passed to the `<ParallaxBanner>` component:
 
@@ -44,7 +44,7 @@ The `layers` prop takes an array of objects that will represent each image (or c
 
 | Name         |      Type      | Default | Description                                                                                                                                              |
 | ------------ | :------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **amount**   |    `number`    |         | A value from `-1` to `1` that represents the vertical offset to be applied to the current layer, `0.1` would equal a `10%` offset on the top and bottom. |
+| **speed**    |    `number`    |         | A value from `-1` to `1` that represents the vertical offset to be applied to the current layer, `0.1` would equal a `10%` offset on the top and bottom. |
 | **children** | `ReactElement` |         | Custom layer children provided as a React element, for example `<Video />`                                                                               |
 | **expanded** |   `boolean`    | `true`  | Indicate if the layer should be expanded with negative top/bottom margins so the edges will never be visible.                                            |
 | **image**    |    `string`    |         | Image source that will be applied as a CSS background image on the layer.                                                                                |

src/components/ParallaxBanner/index.test.tsx

@@ -19,7 +19,7 @@ describe('Expect the <ParallaxBanner> component', () => {
             layers={[
               {
                 image: 'https://foo.com/bar.jpg',
-                amount: 0.2,
+                speed: 2,
               },
             ]}
             style={{
@@ -50,7 +50,7 @@ describe('Expect the <ParallaxBanner> component', () => {
             layers={[
               {
                 children: <div>test</div>,
-                amount: 0.2,
+                speed: 2,
               },
             ]}
             style={{
@@ -75,7 +75,7 @@ describe('Expect the <ParallaxBanner> component', () => {
             layers={[
               {
                 children: <div>test</div>,
-                amount: 0.2,
+                speed: 2,
                 expanded: false,
               },
             ]}
@@ -125,7 +125,7 @@ describe('Expect the <ParallaxBanner> component', () => {
           layers={[
             {
               children: <Child />,
-              amount: 0.2,
+              speed: 2,
             },
           ]}
         />
@@ -143,7 +143,7 @@ describe('Expect the <ParallaxBanner> component', () => {
           <ParallaxBanner
             layers={[
               {
-                amount: 0.2,
+                speed: 2,
                 props: {
                   style: {
                     backgroundColor: 'red',

src/components/ParallaxBanner/index.tsx

@@ -32,7 +32,7 @@ export const ParallaxBanner = ({
       {layers.map(
         (
           {
-            amount,
+            speed,
             children: layerChildren,
             expanded = true,
             image,
@@ -55,10 +55,11 @@ export const ParallaxBanner = ({
           // if this is an expanded layer overwrite the top/bottom styles with negative margins
           const expandedStyle = expanded
             ? {
-                top: Math.abs(amount) * 100 * -1 + '%',
-                bottom: Math.abs(amount) * 100 * -1 + '%',
+                top: Math.abs(speed) * 10 * -1 + 'px',
+                bottom: Math.abs(speed) * 10 * -1 + 'px',
               }
             : {};
+
           // optional image styles
           const imageStyle = image
             ? {
@@ -71,7 +72,7 @@ export const ParallaxBanner = ({
           return (
             <Parallax
               key={`layer-${i}`}
-              translateY={[amount * -1 * 100 + '%', amount * 100 + '%']}
+              speed={speed}
               styleInner={absoluteStyle}
               styleOuter={absoluteStyle}
               disabled={disabled}

src/components/ParallaxBanner/types.ts

@@ -1,9 +1,8 @@
 export interface BannerLayer {
   /**
-   * A value from `-1` to `1` that represents the vertical offset to be applied to the current
-   * layer, `0.1` would equal a `10%` offset on the top and bottom.
+   * A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster.
    */
-  amount: number;
+  speed: number;
   /**
    * Custom layer children provided as a React element, for example `<Video />`
    */

stories/ParallaxBanner/4_ParallaxBanner.stories.tsx

@@ -15,7 +15,7 @@ storiesOf('Components / <ParallaxBanner>', module)
               {
                 image:
                   'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner.jpg',
-                amount: 0.2,
+                speed: -20,
               },
             ]}
           />
@@ -36,7 +36,7 @@ storiesOf('Components / <ParallaxBanner>', module)
               {
                 image:
                   'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner.jpg',
-                amount: 0.2,
+                speed: -20,
               },
             ]}
           />
@@ -54,7 +54,7 @@ storiesOf('Components / <ParallaxBanner>', module)
               {
                 image:
                   'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner.jpg',
-                amount: 0.2,
+                speed: -20,
               },
             ]}
           >
@@ -71,12 +71,12 @@ storiesOf('Components / <ParallaxBanner>', module)
       {
         image:
           'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-background.jpg',
-        amount: 0.5,
+        speed: -20,
       },
       {
         image:
           'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png',
-        amount: 0.25,
+        speed: -10,
       },
     ];
     return (
@@ -101,7 +101,7 @@ storiesOf('Components / <ParallaxBanner>', module)
             className={styles.bannerBg}
             layers={[
               {
-                amount: 0.3,
+                speed: -30,
                 children: (
                   <video
                     className={styles.video}
@@ -138,7 +138,7 @@ storiesOf('Components / <ParallaxBanner>', module)
                     Red
                   </div>
                 ),
-                amount: 0.2,
+                speed: -10,
                 expanded: false,
               },
               {
@@ -147,7 +147,7 @@ storiesOf('Components / <ParallaxBanner>', module)
                     Green
                   </div>
                 ),
-                amount: 0.4,
+                speed: -20,
                 expanded: false,
               },
               {
@@ -156,7 +156,7 @@ storiesOf('Components / <ParallaxBanner>', module)
                     Blue
                   </div>
                 ),
-                amount: 0.6,
+                speed: -30,
                 expanded: false,
               },
             ]}
@@ -176,7 +176,7 @@ storiesOf('Components / <ParallaxBanner>', module)
               {
                 image:
                   'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner.jpg',
-                amount: 0.2,
+                speed: -20,
               },
             ]}
           >