├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public └── index.html └── src ├── App.js ├── App.scss ├── background-triangles.png ├── background.png └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Parallax tutorial 2 | 3 | This repo contains the code from the [YouTube tutorial](https://youtu.be/Q5y6pwoE3cM8). 4 | 5 | ## Branches 6 | 7 | - `master` - finished code with Parallax scrolling effect 8 | - `original` - original implementation with Parallax 9 | 10 | ## Setup 11 | 12 | The project is set up using `create-react-app`. Use `npm start` to start the development server on port `3000`. 13 | 14 | Happy hacking! 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "parallax-scroll", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "node-sass": "^4.14.1", 10 | "react": "^16.13.1", 11 | "react-dom": "^16.13.1", 12 | "react-scripts": "3.4.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 21 | Parallax Scroll 22 | 23 | 24 | 25 |
26 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import "./App.scss"; 3 | 4 | function App() { 5 | const [offsetY, setOffsetY] = useState(0); 6 | const handleScroll = () => setOffsetY(window.pageYOffset); 7 | 8 | useEffect(() => { 9 | window.addEventListener("scroll", handleScroll); 10 | 11 | return () => window.removeEventListener("scroll", handleScroll); 12 | }, []); 13 | 14 | const renderContent = () => ( 15 | <> 16 |
17 |

Closure

18 |

19 | Your one-stop source of Web Development tricks 20 |

21 |
22 |
23 |

24 | 1. Like the video. Because it helps me and my channel 25 |

26 |

27 | 2. Like the video. To see more content like that! 28 |

29 |

30 | 3. Follow the Github link. And play with this code yourself! 31 |

32 |
33 | 34 | ); 35 | 36 | return ( 37 |
38 |
42 |
46 |
{renderContent()}
47 |
48 | ); 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: Arial, Helvetica, sans-serif; 8 | } 9 | 10 | .Parallax { 11 | display: flex; 12 | justify-content: center; 13 | 14 | &__background, 15 | &__background-triangles { 16 | width: 1080px; 17 | height: 1280px; 18 | background-repeat: no-repeat; 19 | background-size: contain; 20 | position: absolute; 21 | } 22 | 23 | &__background { 24 | background-image: url("background.png"); 25 | } 26 | 27 | &__background-triangles { 28 | background-image: url("background-triangles.png"); 29 | } 30 | 31 | &__content { 32 | width: 1080px; 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | z-index: 1; 37 | margin-top: 100px; 38 | 39 | &__heading, 40 | &__cta { 41 | text-align: center; 42 | display: flex; 43 | flex-direction: column; 44 | } 45 | 46 | &__heading { 47 | background-color: #fff; 48 | width: 40%; 49 | padding: 40px; 50 | 51 | &__text { 52 | margin: 10px 0; 53 | font-size: 60px; 54 | } 55 | 56 | &__caption { 57 | margin: 0; 58 | font-size: 20px; 59 | } 60 | } 61 | 62 | &__cta { 63 | background-color: #ff737e; 64 | width: 60%; 65 | padding: 40px; 66 | 67 | font-size: 20px; 68 | color: #fff; 69 | 70 | margin-top: 120px; 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/background-triangles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheClosure/parallax-tutorial/879ea325b6ee4cf25a915e96fe1058e7c5f5067e/src/background-triangles.png -------------------------------------------------------------------------------- /src/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheClosure/parallax-tutorial/879ea325b6ee4cf25a915e96fe1058e7c5f5067e/src/background.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | --------------------------------------------------------------------------------