Merge pull request #1 from TylerK/release

Fixing cross-browser jank

Author: TylerK

demo.js

@@ -37,28 +37,33 @@ class Example extends Component {
         <ParallaxHover
           width={200}
           height={200}
-          borderRadius={8}
+          borderRadius={10}
+          rotation={3}
+          shine={3}
         >
           <ExampleComponent>
-            <img width="100%" src="http://www.lorempixel.com/200/200" />
+            <img src="http://lorempixel.com/200/200/" alt=""/>
           </ExampleComponent>
         </ParallaxHover>
+
         <ParallaxHover
           width={200}
           height={200}
-          borderRadius={8}
+          rotation={9}
         >
           <ExampleComponent>
-            <img width="100%" src="http://www.lorempixel.com/220/220" />
+            <img src="http://lorempixel.com/220/220/" alt=""/>
           </ExampleComponent>
         </ParallaxHover>
+
         <ParallaxHover
           width={200}
           height={200}
-          borderRadius={8}
+          borderRadius={33}
+          shine={9}
         >
           <ExampleComponent>
-            <img width="100%" src="http://www.lorempixel.com/240/240" />
+            <img src="http://lorempixel.com/240/240/" alt=""/>
           </ExampleComponent>
         </ParallaxHover>
       </div>

index.html

@@ -16,6 +16,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        overflow: hidden;
       }
     </style>
   </head>

index.js

@@ -2,6 +2,9 @@ import React, { Component, PropTypes } from 'react';
 import { StyleSheet, css } from 'aphrodite/no-important';
 
 const baseStyles = {
+  transition: {
+    transition: 'all 222ms ease-out',
+  },
   layers: {
     width: '100%',
     height: '100%',
@@ -14,42 +17,29 @@ const baseStyles = {
 };
 
 const styles = StyleSheet.create({
-  outter: {
-    transformStyle: 'preserve-3d'
-  },
-  wrapper: {
+  parallaxHover__outter: {
+    transformStyle: 'preserve-3d',
     position: 'relative',
-    margin: 0,
-    padding: 0,
-    transition: 'all 180ms ease-in-out',
+    overflow: 'visible',
+    ...baseStyles.transition,
   },
-  shadow: {
-    background: 'rgba(0, 0, 0, 0.2)',
+  parallaxHover__wrapper: {
+    overflow: 'hidden',
     ...baseStyles.layers,
-    filter: 'blur(3px)',
+  },
+  parallaxHover__shadow: {
+    position: 'absolute',
     width: '80%',
     height: '80%',
     left: '10%',
     top: '10%',
-    transition: 'all 180ms ease-in-out',
-  },
-  layers: {
-    ...baseStyles.layers
   },
-  layer: {
-    ...baseStyles.layers,
+  parallaxHover__layer: {
     overflow: 'hidden',
-  },
-  lighting: {
-    opacity: 0,
     ...baseStyles.layers,
   },
-  text: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    textAlign: 'center',
-    fontSize: '5rem',
+  parallaxHover__lighting: {
+    ...baseStyles.layers,
   },
 });
 
@@ -60,7 +50,7 @@ const initialState = {
   shadowSize: 0,
   scale: 1,
   shine: 0,
-  isScaling: false,
+  isHovered: false,
 };
 
 export default class ParallaxHover extends Component {
@@ -69,17 +59,21 @@ export default class ParallaxHover extends Component {
     this.state = initialState;
   }
 
-  buildTransformStrings(depth = 1) {
-    const { scale, rotateX, rotateY } = this.state;
+  componentWillMount() {
+    const { shine } = this.props;
+    this.setState({ shine });
+  }
+
+  buildTransformStrings(depth = 0) {
+    const { rotateX, rotateY } = this.state;
 
-    const scaleModifier = 1 + (scale / 100);
     const rotationXModifier = rotateX + depth;
     const rotationYModifier = rotateY + depth;
 
     return {
-      WebkitTransform: `perspective(1000px) scale(${scaleModifier}) rotateX(${rotationXModifier}deg) rotateY(${rotationYModifier}deg)`,
-      MozTransform: `perspective(1000px) scale(${scaleModifier}) rotateX(${rotationXModifier}deg) rotateY(${rotationYModifier}deg)`,
-      transform: `perspective(1000px) scale(${scaleModifier}) rotateX(${rotationXModifier}deg) rotateY(${rotationYModifier}deg)`
+      WebkitTransform: `rotateX(${rotationXModifier}deg) rotateY(${rotationYModifier}deg)`,
+      MozTransform: `rotateX(${rotationXModifier}deg) rotateY(${rotationYModifier}deg)`,
+      transform: `rotateX(${rotationXModifier}deg) rotateY(${rotationYModifier}deg)`
     };
   }
 
@@ -95,19 +89,28 @@ export default class ParallaxHover extends Component {
     return current / max * shine;
   }
 
+  handleParallaxBegin = () => {
+    this.setState({
+      isHovered: true,
+      shine: this.props.shine,
+    });
+  }
+
   handleParallaxEnd = () => {
     this.setState(initialState);
   }
 
   handleParallaxMove = ({ pageX, pageY }) => {
     const { width, height, rotation, scale } = this.props;
-    const { scrollTop, scrollLeft } = document.body;
+    const { scrollY: scrollTop, scrollX: scrollLeft } = window;
+
+    if (!this.state.isHovered) this.setState({ isHovered: true });
 
     const bounds = this.wrapper.getBoundingClientRect();
     const centerX = width / 2;
     const centerY = height / 2;
 
-    const widthMultiplier = 320 / width;
+    const widthMultiplier = 360 / width;
     const offsetX = (pageX - bounds.left - scrollLeft) / width;
     const offsetY = (pageY - bounds.top - scrollTop) / height;
     const deltaX = (pageX - bounds.left - scrollLeft) - centerX;
@@ -119,11 +122,8 @@ export default class ParallaxHover extends Component {
     const angleRad = Math.atan2(deltaY, deltaX);
     const angleRaw = angleRad * 180 / Math.PI - 90;
     const angle = angleRaw < 0 ? angleRaw + 360 : angleRaw;
-    const distanceFromCenter = this.calculateDistance(bounds, offsetX, offsetY);
     const shadowMovement = centerY * 0.25;
-    const shadowSize = 120;
-
-    const shine = this.calculateShineFromCenter(distanceFromCenter);
+    const shadowSize = 110;
 
     this.setState({
       angle,
@@ -132,94 +132,104 @@ export default class ParallaxHover extends Component {
       scale,
       shadowMovement,
       shadowSize,
-      shine,
     });
   }
 
   renderLayers() {
     const { borderRadius, children } = this.props;
+    const _styles = {
+      borderRadius: `${borderRadius}px`,
+      ...this.buildTransformStrings(),
+    };
 
     if (!Array.isArray(children)) {
-      const _styles = {
-        ...this.buildTransformStrings(),
-        borderRadius: `${borderRadius}px`
-      };
-
       return (
-        <div style={_styles} className={css(styles.layer)}>{children}</div>
+        <div
+          style={_styles}
+          className={css(styles.parallaxHover__layer)}
+        >
+          {children}
+        </div>
       );
     }
 
-
     return children.map((layer, key) => {
-      const depth = key + 0.1;
-      const _styles = {
-        ...this.buildTransformStrings(depth),
-        borderRadius: `${borderRadius}px`
-      };
-      return <div style={_styles} className={css(styles.layer)} key={key}>{layer}</div>;
+      return (
+        <div
+          style={_styles}
+          className={css(styles.parallaxHover__layer)}
+          key={key}
+        >
+          {layer}
+        </div>
+      );
     });
   }
 
   render() {
-    const { angle, shine, shadowMovement, shadowSize } = this.state;
+    const { angle, isHovered, scale, shadowMovement, shadowSize, shine } = this.state;
     const { borderRadius, width, height } = this.props;
 
-    // Styles that need to be recalculated on render
-    // Or passed in from props
+    const scaleModifier = isHovered ? (1 + scale / 50) : 1;
+
+    // Styles that need to be recalculated on render or passed in from props
     const _styles = {
-      lighting: {
-        backgroundImage: `linear-gradient(${angle}deg, rgba(255,255,255, ${(shine / 10)}) 0%, rgba(255,255,255,0) 40%)`,
+      overlay: {
+        width: `${width}px`,
+        height: `${height}px`,
+        transform: `scale(${scaleModifier}) perspective(1000px)`
+      },
+      wrapper: {
+        height: `${height}px`,
+        width: `${width}px`,
         borderRadius: `${borderRadius}px`,
-        opacity: '1',
         ...this.buildTransformStrings(),
       },
-
-      shadow: {
-        boxShadow: `0px ${shadowMovement}px ${shadowSize}px rgba(0, 0, 0, 0.6)`,
+      lighting: {
+        backgroundImage: `linear-gradient(${angle}deg, rgba(255,255,255, ${shine / 10}) 0%, rgba(255,255,255,0) 50%)`,
         borderRadius: `${borderRadius}px`,
         ...this.buildTransformStrings(),
       },
-
-      wrapper: {
-        height: `${height}px`,
-        width: `${width}px`,
+      shadow: {
         borderRadius: `${borderRadius}px`,
+        boxShadow: `0px ${shadowMovement}px ${shadowSize}px rgba(0, 0, 0, 0.5)`,
         ...this.buildTransformStrings(),
       },
     };
 
     return (
-       <div className={css(styles.outter)}>
+      <div
+        className={css(styles.parallaxHover__outter)}
+        onMouseEnter={this.handleParallaxBegin}
+        onMouseLeave={this.handleParallaxEnd}
+        onMouseMove={this.handleParallaxMove}
+        onTouchStart={this.handleParallaxBegin}
+        onTouchMove={this.handleParallaxEnd}
+        onTouchEnd={this.handleParallaxMove}
+        style={_styles.overlay}
+      >
+        <div className={css(styles.parallaxHover__shadow)} style={_styles.shadow} />
         <div
-          className={css(styles.wrapper)}
+          className={css(styles.parallaxHover__wrapper)}
           style={_styles.wrapper}
-          onMouseEnter={this.handleParallaxBegin}
-          onMouseLeave={this.handleParallaxEnd}
-          onMouseMove={this.handleParallaxMove}
-          onTouchStart={this.handleParallaxBegin}
-          onTouchMove={this.handleParallaxMove}
-          onTouchEnd={this.handleParallaxEnd}
           ref={(wrapper) => { this.wrapper = wrapper; }}
         >
-          <div className={css(styles.shadow)} style={_styles.shadow} />
-          <div className={css(styles.layers)}>
-            { this.renderLayers() }
-          </div>
-          <div className={css(styles.lighting)} style={_styles.lighting} />
+          { this.renderLayers() }
+          <div className={css(styles.parallaxHover__lighting)} style={_styles.lighting} />
         </div>
       </div>
     );
   }
 }
 
 ParallaxHover.defaultProps = {
-  speed: 100,     // How fast the item scales up and down in MS
-  scale: 5,       // How large to scale the item
-  rotation: 6,    // Rotation modifier
-  shine: 5,       // Light shine brightness modifer
-  height: 200,    // Default height
-  width: 200,     // Default width
+  speed: 100,       // How fast the item scales up and down in MS
+  scale: 6,         // How large to scale the item
+  rotation: 8,      // Rotation modifier
+  shine: 5,         // Light shine brightness modifer
+  height: 200,      // Default height
+  width: 200,       // Default width
+  borderRadius: 0   // Default border radius
 };
 
 ParallaxHover.propTypes = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-parallax-hover",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/TylerK/react-parallax-hover.git"