Shadow Parallax • Reactjs

index.html

<!--  Goodbye DOMs ∆ This pen written by Reactjs -->

script.babel

class App extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			pos: {x: 0, y: 0},
			shadow: true,
		    colors: [
			{
		        "background": "#2A2C39",
		        "text": "#ffffff",
		        "bold": "#FF4056"
		    }, {
		        "background": "#FCF751",
		        "text": "#2A2C39",
		        "bold": "#14151c"
		    }],
		    background: null,
		    text: null,
		    bold: null
		};
	}

	componentDidMount(){
		this.RandomBackground();
	}

    onMouseMove(e) {
        this.setState({
        	pos: {
        		x: e.pageX,
        		y: e.pageY
        	}
        });

        this.CreateShadow();
    }

	CreateShadow() {
	
	    if ('ontouchstart' in window == false && this.state.shadow) {

	            let [moveX, moveY] = [(this.state.pos.x / -100), (this.state.pos.y / -120)];

	            let [Section, firstWord, secondWord] = [React.findDOMNode(this.refs.section), React.findDOMNode(this.refs.playword_1), React.findDOMNode(this.refs.playword_2)];

				firstWord.style.transform = `translate3d(${moveX / 2}px, ${moveY}px, 0)`;
				secondWord.style.transform = `translate3d(${moveX / 2}px, ${moveY}px, 0)`;
				Section.style.textShadow = `${moveX}px ${-moveY}px rgba(0, 0, 0, 0.1)`;

		}
	}

	RandomBackground(){
		let getRandomInt = (min, max) => {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}

		let RandomID 	= getRandomInt(0, 1),
			SelectColor = this.state.colors[RandomID];

		console.log(RandomID);

		this.setState({
			background: this.state.colors[RandomID].background,
			text: this.state.colors[RandomID].text,
			bold: this.state.colors[RandomID].bold
		})
	}

	render() {
		let sectionStyle = {
			backgroundColor: this.state.background,
			color: this.state.text
		}
		let boldStyle = {
			color: this.state.bold
		}

		return <section id="app" onMouseMove={this.onMouseMove.bind(this)} style={sectionStyle}>
				<h1 className="middle" ref="section">
					Movement is <span className="bold" ref="playword_1" style={boldStyle}>here</span>.
					<br/>
					And it is here to <span className="bold" ref="playword_2" style={boldStyle}>stay</span>.
				</h1>
			</section>
	}
}

React.render(<App />,
	document.querySelector('body')
);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>

shadow-parallax-reactjs.markdown

Shadow Parallax • Reactjs

Move your Mouse and Play words. Written by React, ES6, Babel transpiler

A Pen by Siamak Mokhtari on CodePen.

License.

style.scss

@import url(https://fonts.googleapis.com/css?family=Lato:300|Montserrat:700,400);
*{
    box-sizing: border-box;
    &:active, &:focus{
    	border: 0;
    	outline: 0;
    }
}

html, body {
	height: 100%;
	padding: 0;
}

html {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	@media screen and (max-width: 70em) {
		font-size: ( 10 / 16 ) * 1rem;
	}
}

body{
	background-color: #EEEEEF;
	font-family: Montserrat, Helvetica, Times, serif;
	font-size: 1rem;
	line-height: 1.45;
	text-rendering: optimizeLegibility;
	-webkit-font-feature-settings: "liga", "kern";
}

a{
	color: #555;
	text-decoration: none;
}
a:hover{ color: #888; }


p {
	margin-bottom: 1.3em;
}

h1, h2, h3, h4 {
	margin: 1.414em 0 0.5em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.45rem;
}

h1 {
	margin-top: 0;
	font-size: 6.853em;
	/* Hello stylesheet! */
	width: 90vw;
	@extend %fit-top-right-bottom-left;
}


section{
	position: relative;
	height: 100vh;
	padding: 2.618em 0;
	text-align: center;
	text-shadow: -2px 1px rgba(black, 0.1);
	&:after{
		content: 'Move your Mouse and Play with Reactjs "ES6". Created by Siamak Mokhtari.';
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 1.75ex;
		font-weight: 300;
		font-family: Lato, Helvetica, Times, serif;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 3.5px;
		white-space: nowrap;
	}
	.bold{
		display: inline-block;
		font-weight: normal;
		color: darken(#2A2C39, 10);
		will-change: transform;
		// transition: .2s;
	}
}

%fit-top-right-bottom-left{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}