A Pen by Chase Harrison on CodePen.
Created
February 28, 2019 11:59
-
-
Save ChaseH88/763c6750014c88ccb324e086491cdee2 to your computer and use it in GitHub Desktop.
React - Mousemove background
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
<div id="root"></div> |
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
// Regular Function | |
function transform(offset) { | |
const cos = Math.cos(offset); | |
const sin = Math.sin(offset); | |
return { transform: `matrix3d(${sin}, ${-cos}, ${sin}, 0, ${-cos}, ${sin}, 0, 0, 0, ${cos}, ${cos}, ${sin}, 0, 0, 0, 1)` }; | |
} | |
//------------Component------------ | |
class App extends React.Component { | |
// --State-- | |
state = {styleOne: {}, styleTwo: {} }; | |
// --Events-- | |
onMouseMove = (e) => { | |
this.setState({ | |
styleOne: transform(-e.clientX / e.clientY), | |
styleTwo: transform(e.clientX / e.clientY), | |
styleThree: transform(e.clientY / e.clientX+1000), | |
styleFour: transform(e.clientY / e.clientX*2) | |
}) | |
} | |
// --Render-- | |
render(){ | |
return ( | |
<div onMouseMove={this.onMouseMove}> | |
<div className="panel" style={this.state.styleOne}></div> | |
<div className="panel" style={this.state.styleTwo}></div> | |
<div className="panel" style={this.state.styleThree}></div> | |
<div className="panel" style={this.state.styleFour}></div> | |
</div> | |
) | |
} | |
} | |
// React DOM Render Method | |
ReactDOM.render( | |
<App />, document.querySelector("#root") | |
) |
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js"></script> |
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
body {overflow: hidden;} | |
div {height: 100vh; width: 100vw;} | |
.panel {position: absolute; border: 10px dashed #000; background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"%3E%3C/path%3E%3C/svg%3E');} | |
.panel:first-of-type {box-shadow: 0 0 200px yellow;} | |
.panel:nth-of-type(2) {box-shadow: 0 0 200px red;} | |
.panel:nth-of-type(3) {box-shadow: 0 0 200px green;} | |
.panel:nth-of-type(4) {box-shadow: 0 0 200px blue;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment