Created
December 19, 2017 04:30
-
-
Save ehabdevel/3e966d8342cc4b12bb81ee5bb798f24a to your computer and use it in GitHub Desktop.
Scroll Animations with React
This file contains hidden or 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
| ***About > styles.css*** | |
| ------------------------ | |
| .about-wrapper { | |
| height: 30em; | |
| width: 100vw; | |
| } | |
| .about-text { | |
| position: relative; | |
| width: 30em; | |
| height: 20em; | |
| } | |
| .show { | |
| position: absolute; | |
| left: -30em; | |
| width: 30em; | |
| height: 20em; | |
| -webkit-animation: slide-in 1s forwards; | |
| animation: slide-in 1s forwards; | |
| } | |
| @-webkit-keyframes slide-in { | |
| 100% { left: 0 } | |
| } | |
| @keyframes slide-in { | |
| 100% { left: 0 } | |
| } |
This file contains hidden or 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
| ***About > index.js*** | |
| ----------------------- | |
| import React, { Component } from 'react'; | |
| import './styles.css'; | |
| class About extends Component { | |
| render() { | |
| return( | |
| <div className="about-wrapper"> | |
| <div className="about-text"> | |
| <div className={this.props.className}> | |
| <h3>Title</h3> | |
| <p>This is a text that will appear.</p> | |
| </div> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| } | |
| export default About; |
This file contains hidden or 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
| ***App > index.js*** | |
| -------------------- | |
| import React, { Component } from 'react'; | |
| import About from '../About'; | |
| import Header from '../Header'; | |
| class App extends Component { | |
| constructor() { | |
| super(); | |
| this.state = { | |
| className: 'hidden' | |
| } | |
| } | |
| handleScroll() { | |
| if (document.documentElement.scrollTop > 430) { | |
| this.setState({ | |
| className: 'show' | |
| }) | |
| } | |
| } | |
| componentDidMount() { | |
| window.onscroll = () => this.handleScroll() | |
| } | |
| render() { | |
| return( | |
| <div> | |
| <Header /> | |
| <About className={this.state.className} /> | |
| </div> | |
| ) | |
| } | |
| } | |
| export default App; |
This file contains hidden or 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
| ***Header > index.js*** | |
| ----------------------- | |
| import React from 'react'; | |
| import './styles.css'; | |
| const Header = () => ( | |
| <div className="header"> | |
| <h1>Title</h1> | |
| </div> | |
| ) | |
| export default Header; |
This file contains hidden or 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
| ***Header > styles.css*** | |
| ------------------------- | |
| .header { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| width: 100vw; | |
| } | |
| .header h1 { | |
| font-size: 30px; | |
| color: white; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment