-
-
Save yrokhlin/0e4c3c0f2fe13a7b86db9c3e41b6bcc4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
styles = StyleSheet.create({ | |
container: { | |
position: 'relative', | |
overflow: 'hidden', | |
minHeight: 200 | |
}, | |
topVideoContainer: { | |
position: 'absolute', | |
top: 0, | |
left: 0, | |
width: '100%', | |
height: '100%' | |
} | |
}); | |
export default class VidCompare extends Component { | |
static propTypes = { | |
video1webm: PropTypes.string, | |
video2webm: PropTypes.string, | |
video1mp4: PropTypes.string, | |
video2mp4: PropTypes.string | |
}; | |
static defaultProps = { | |
video1webm: 'video-1.webm', | |
video2webm: 'video-2.webm', | |
video1mp4: 'video-1.mp4', | |
video2mp4: 'video-2.mp4' | |
}; | |
// Notice we have added some state to keep track of everything, | |
// the `started` state will control the animation | |
state = { | |
pageX: 0, | |
started: false | |
}; | |
_handleMouseMove(e) { | |
let left = this.container.getBoundingClientRect().left; | |
this.setState({ | |
pageX: e.touches ? e.touches[0].pageX - left : e.pageX - left | |
}); | |
} | |
constructor(props) { | |
super(props); | |
this.handleMouseMove = this._handleMouseMove.bind(this); | |
} | |
render() { | |
let { video1webm, video2webm, video1mp4, video2mp4 } = this.props; | |
// Default states for when there is no mouse hovering | |
let transform = { transform: 'translateX(100%)' }; | |
// The inverse of the transform | |
let transformNegative = { transform: 'translateX(-100%)' }; | |
// If mouse is hovering, plug the pageX state as the translate value | |
if (this.state.started) { | |
transform = { transform: `translateX(${pageX}px)` }; | |
transformNegative = { transform: `translateX(${pageX * -1}px)` }; // inverse | |
} | |
<div | |
id="vid-compare-container" | |
className={css(styles.container)} | |
ref={ ref => { this.container = ref } > | |
<video width="100%" height="100%" autoPlay loop> | |
<source src={video1webm} type="video/webm"/> | |
<source src={video1mp4} type="video/mp4"/> | |
</video> | |
<div style={transform} className={css(styles.topVideoContainer)}> | |
<video style={transformNegative} width="100%" height="100%" autoPlay loop> | |
<source src={video2webm} type="video/webm"/> | |
<source src={video2mp4} type="video/mp4"/> | |
</video> | |
</div> | |
</div> | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment