├── .gitignore ├── LICENSE ├── README.md ├── build ├── asset-manifest.json ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt └── static │ ├── css │ ├── main.ae0fbeca.css │ └── main.ae0fbeca.css.map │ ├── js │ ├── 787.fcea0ce9.chunk.js │ ├── 787.fcea0ce9.chunk.js.map │ ├── main.f6d287f1.js │ ├── main.f6d287f1.js.LICENSE.txt │ └── main.f6d287f1.js.map │ └── media │ ├── background.f8e0a3e86fb4252623af.png │ ├── jungle1.5ec83d96505269c854f3.png │ ├── jungle2.b3f7031947988987d357.png │ ├── jungle3.5350abbda455914478ee.png │ ├── jungle4.80488612344ed2683ee6.png │ ├── jungle5.6f841a2d5b2b021093df.png │ ├── logo_land.38bc453f18c7f64bebdc.png │ ├── man_on_mountain.41b59d37a39bb0b35f75.png │ └── mountains.af6b8801f09352cf3f76.png ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── .DS_Store ├── App.css ├── App.js ├── App.test.js ├── images ├── background.png ├── jungle1.png ├── jungle2.png ├── jungle3.png ├── jungle4.png ├── jungle5.png ├── logo_land.png ├── man_on_mountain.png └── mountains.png ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js ├── setupTests.js └── textBlock.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ashutosh Hathidara 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Parallax Animation in React 2 | 3 | This project is created as part of below YouTube video. 4 | 5 |

6 | 7 | 8 | 9 |

10 | 11 | #### Installation 12 | Follow these steps to set up the PDF Merger Web App on your local machine: 13 | 14 | #### Clone the Repository: 15 | 16 | ```bash 17 | git clone https://github.com/ashutosh1919/react-parallax-demo.git 18 | cd react-parallax-demo 19 | ``` 20 | 21 | Install Dependencies: 22 | 23 | ```bash 24 | npm install 25 | ``` 26 | 27 | Start the Application: 28 | 29 | ```bash 30 | npm start 31 | ``` 32 | 33 | The app will be accessible at http://localhost:3000. -------------------------------------------------------------------------------- /build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.ae0fbeca.css", 4 | "main.js": "/static/js/main.f6d287f1.js", 5 | "static/js/787.fcea0ce9.chunk.js": "/static/js/787.fcea0ce9.chunk.js", 6 | "static/media/jungle1.png": "/static/media/jungle1.5ec83d96505269c854f3.png", 7 | "static/media/background.png": "/static/media/background.f8e0a3e86fb4252623af.png", 8 | "static/media/jungle3.png": "/static/media/jungle3.5350abbda455914478ee.png", 9 | "static/media/mountains.png": "/static/media/mountains.af6b8801f09352cf3f76.png", 10 | "static/media/man_on_mountain.png": "/static/media/man_on_mountain.41b59d37a39bb0b35f75.png", 11 | "static/media/jungle4.png": "/static/media/jungle4.80488612344ed2683ee6.png", 12 | "static/media/jungle2.png": "/static/media/jungle2.b3f7031947988987d357.png", 13 | "static/media/logo_land.png": "/static/media/logo_land.38bc453f18c7f64bebdc.png", 14 | "static/media/jungle5.png": "/static/media/jungle5.6f841a2d5b2b021093df.png", 15 | "index.html": "/index.html", 16 | "main.ae0fbeca.css.map": "/static/css/main.ae0fbeca.css.map", 17 | "main.f6d287f1.js.map": "/static/js/main.f6d287f1.js.map", 18 | "787.fcea0ce9.chunk.js.map": "/static/js/787.fcea0ce9.chunk.js.map" 19 | }, 20 | "entrypoints": [ 21 | "static/css/main.ae0fbeca.css", 22 | "static/js/main.f6d287f1.js" 23 | ] 24 | } -------------------------------------------------------------------------------- /build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/favicon.ico -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/logo192.png -------------------------------------------------------------------------------- /build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/logo512.png -------------------------------------------------------------------------------- /build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /build/static/css/main.ae0fbeca.css: -------------------------------------------------------------------------------- 1 | body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#textblock{background-color:#210002;height:100vh}#textblock-container{margin:0 auto;padding-top:70px;width:50%}#textblock-title{color:#ffaf1b;font-family:Helvetica Neue;font-size:35px;font-weight:600}#textblock-content{color:#ffaf1b;font-size:20px}#textblock-footer{align-items:center;bottom:0;color:#ffaf1b;font-size:15px;font-weight:400;justify-content:center;margin-bottom:20px;position:fixed;text-align:center;width:100%}#textblock-devsense{color:#ffaf1b;font-size:15px;font-weight:600;text-decoration:none}.animation,.animation_layer{height:1000px}.animation{display:block;position:relative;z-index:10}.animation_layer{background-position:bottom;background-repeat:repeat-x;background-size:auto 1038px;position:absolute;width:100%}.animation_layer.parallax{position:fixed}#artback{background-image:url(/static/media/background.f8e0a3e86fb4252623af.png)}#mountain{background-image:url(/static/media/mountains.af6b8801f09352cf3f76.png)}#logoland{background-image:url(/static/media/logo_land.38bc453f18c7f64bebdc.png)}#jungle1{background-image:url(/static/media/jungle1.5ec83d96505269c854f3.png)}#jungle2{background-image:url(/static/media/jungle2.b3f7031947988987d357.png)}#jungle3{background-image:url(/static/media/jungle3.5350abbda455914478ee.png)}#jungle4{background-image:url(/static/media/jungle4.80488612344ed2683ee6.png)}#jungle5{background-image:url(/static/media/jungle5.6f841a2d5b2b021093df.png)}#manonmountain{background-image:url(/static/media/man_on_mountain.41b59d37a39bb0b35f75.png)} 2 | /*# sourceMappingURL=main.ae0fbeca.css.map*/ -------------------------------------------------------------------------------- /build/static/css/main.ae0fbeca.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/css/main.ae0fbeca.css","mappings":"AAAA,KAKE,kCAAmC,CACnC,iCAAkC,CAJlC,mIAEY,CAHZ,QAMF,CAEA,KACE,uEAEF,CCZA,WACE,wBAAyB,CACzB,YACF,CAEA,qBAEE,aAAc,CACd,gBAAiB,CAFjB,SAGF,CAEA,iBACE,aAAc,CAGd,0BAA6B,CAF7B,cAAe,CACf,eAEF,CAEA,mBACE,aAAc,CACd,cACF,CAEA,kBAQE,kBAAkB,CAFlB,QAAW,CALX,aAAc,CACd,cAAe,CACf,eAAgB,CAIhB,sBAAsB,CAGtB,kBAAmB,CANnB,cAAe,CAKf,iBAAiB,CAJjB,UAOF,CAEA,oBAEE,aAAc,CACd,cAAe,CACf,eAAgB,CAHhB,oBAIF,CAEA,4BACC,aACD,CAEA,WACE,aAAc,CACf,iBAAkB,CAClB,UACD,CAEA,iBACC,0BAAkC,CAElC,0BAA2B,CAD3B,2BAA4B,CAG5B,iBAAkB,CADlB,UAED,CACA,0BACC,cACD,CAEA,SACE,uEACF,CAEA,UACE,sEACF,CAEA,UACE,sEACF,CAEA,SACE,oEACF,CAEA,SACE,oEACF,CAEA,SACE,oEACF,CAEA,SACE,oEACF,CAEA,SACE,oEACF,CAEA,eACE,4EACF","sources":["index.css","App.css"],"sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n","#textblock {\n background-color: #210002;\n height: 100vh;\n}\n\n#textblock-container {\n width: 50%;\n margin: 0 auto;\n padding-top: 70px;\n}\n\n#textblock-title {\n color: #ffaf1b;\n font-size: 35px;\n font-weight: 600;\n font-family: \"Helvetica Neue\";\n}\n\n#textblock-content {\n color: #ffaf1b;\n font-size: 20px;\n}\n\n#textblock-footer {\n color: #ffaf1b;\n font-size: 15px;\n font-weight: 400;\n position: fixed;\n width: 100%;\n bottom: 0px;\n justify-content:center;\n align-items:center;\n text-align:center;\n margin-bottom: 20px;\n\n}\n\n#textblock-devsense {\n text-decoration: none;\n color: #ffaf1b;\n font-size: 15px;\n font-weight: 600;\n}\n\n.animation, .animation_layer {\n\theight: 1000px;\n}\n\n.animation {\n display: block;\n\tposition: relative;\n\tz-index: 10;\n}\n\n.animation_layer {\n\tbackground-position: bottom center;\n\tbackground-size: auto 1038px;\n\tbackground-repeat: repeat-x;\n\twidth: 100%;\n\tposition: absolute;\n}\n.animation_layer.parallax {\n\tposition: fixed;\n}\n\n#artback {\n background-image: url(./images/background.png);\n}\n\n#mountain {\n background-image: url(./images/mountains.png);\n}\n\n#logoland {\n background-image: url(./images/logo_land.png);\n}\n\n#jungle1 {\n background-image: url(./images/jungle1.png);\n}\n\n#jungle2 {\n background-image: url(./images/jungle2.png);\n}\n\n#jungle3 {\n background-image: url(./images/jungle3.png);\n}\n\n#jungle4 {\n background-image: url(./images/jungle4.png);\n}\n\n#jungle5 {\n background-image: url(./images/jungle5.png);\n}\n\n#manonmountain {\n background-image: url(./images/man_on_mountain.png);\n}"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /build/static/js/787.fcea0ce9.chunk.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkreact_parallax=self.webpackChunkreact_parallax||[]).push([[787],{787:function(e,t,n){n.r(t),n.d(t,{getCLS:function(){return y},getFCP:function(){return g},getFID:function(){return C},getLCP:function(){return P},getTTFB:function(){return D}});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},f=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},s=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,p=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){f((function(e){var t=e.timeStamp;v=t}),!0)},l=function(){return v<0&&(v=p(),d(),s((function(){setTimeout((function(){v=p(),d()}),0)}))),{get firstHiddenTime(){return v}}},g=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},p=c("layout-shift",v);p&&(n=m(i,r,t),f((function(){p.takeRecords().map(v),n(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),p=function(e){e.startTimeperformance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]); 2 | //# sourceMappingURL=787.fcea0ce9.chunk.js.map -------------------------------------------------------------------------------- /build/static/js/787.fcea0ce9.chunk.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/js/787.fcea0ce9.chunk.js","mappings":"iRAAA,IAAIA,EAAEC,EAAEC,EAAEC,EAAEC,EAAE,SAASJ,EAAEC,GAAG,MAAM,CAACI,KAAKL,EAAEM,WAAM,IAASL,GAAG,EAAEA,EAAEM,MAAM,EAAEC,QAAQ,GAAGC,GAAG,MAAMC,OAAOC,KAAKC,MAAM,KAAKF,OAAOG,KAAKC,MAAM,cAAcD,KAAKE,UAAU,MAAM,EAAEC,EAAE,SAAShB,EAAEC,GAAG,IAAI,GAAGgB,oBAAoBC,oBAAoBC,SAASnB,GAAG,CAAC,GAAG,gBAAgBA,KAAK,2BAA2BoB,MAAM,OAAO,IAAIlB,EAAE,IAAIe,qBAAqB,SAASjB,GAAG,OAAOA,EAAEqB,aAAaC,IAAIrB,EAAE,IAAI,OAAOC,EAAEqB,QAAQ,CAACC,KAAKxB,EAAEyB,UAAS,IAAKvB,CAAC,CAAW,CAAT,MAAMF,GAAG,CAAC,EAAE0B,EAAE,SAAS1B,EAAEC,GAAG,IAAIC,EAAE,SAASA,EAAEC,GAAG,aAAaA,EAAEqB,MAAM,WAAWG,SAASC,kBAAkB5B,EAAEG,GAAGF,IAAI4B,oBAAoB,mBAAmB3B,GAAE,GAAI2B,oBAAoB,WAAW3B,GAAE,IAAK,EAAE4B,iBAAiB,mBAAmB5B,GAAE,GAAI4B,iBAAiB,WAAW5B,GAAE,EAAG,EAAE6B,EAAE,SAAS/B,GAAG8B,iBAAiB,YAAY,SAAS7B,GAAGA,EAAE+B,WAAWhC,EAAEC,EAAE,IAAG,EAAG,EAAEgC,EAAE,SAASjC,EAAEC,EAAEC,GAAG,IAAIC,EAAE,OAAO,SAASC,GAAGH,EAAEK,OAAO,IAAIF,GAAGF,KAAKD,EAAEM,MAAMN,EAAEK,OAAOH,GAAG,IAAIF,EAAEM,YAAO,IAASJ,KAAKA,EAAEF,EAAEK,MAAMN,EAAEC,IAAI,CAAC,EAAEiC,GAAG,EAAEC,EAAE,WAAW,MAAM,WAAWR,SAASC,gBAAgB,EAAE,GAAG,EAAEQ,EAAE,WAAWV,GAAG,SAAS1B,GAAG,IAAIC,EAAED,EAAEqC,UAAUH,EAAEjC,CAAC,IAAG,EAAG,EAAEqC,EAAE,WAAW,OAAOJ,EAAE,IAAIA,EAAEC,IAAIC,IAAIL,GAAG,WAAWQ,YAAY,WAAWL,EAAEC,IAAIC,GAAG,GAAG,EAAE,KAAK,CAAKI,sBAAkB,OAAON,CAAC,EAAE,EAAEO,EAAE,SAASzC,EAAEC,GAAG,IAAIC,EAAEC,EAAEmC,IAAIZ,EAAEtB,EAAE,OAAO8B,EAAE,SAASlC,GAAG,2BAA2BA,EAAEK,OAAO+B,GAAGA,EAAEM,aAAa1C,EAAE2C,UAAUxC,EAAEqC,kBAAkBd,EAAEpB,MAAMN,EAAE2C,UAAUjB,EAAElB,QAAQoC,KAAK5C,GAAGE,GAAE,IAAK,EAAEiC,EAAEU,OAAOC,aAAaA,YAAYC,kBAAkBD,YAAYC,iBAAiB,0BAA0B,GAAGX,EAAED,EAAE,KAAKnB,EAAE,QAAQkB,IAAIC,GAAGC,KAAKlC,EAAE+B,EAAEjC,EAAE0B,EAAEzB,GAAGkC,GAAGD,EAAEC,GAAGJ,GAAG,SAAS5B,GAAGuB,EAAEtB,EAAE,OAAOF,EAAE+B,EAAEjC,EAAE0B,EAAEzB,GAAG+C,uBAAuB,WAAWA,uBAAuB,WAAWtB,EAAEpB,MAAMwC,YAAYlC,MAAMT,EAAEkC,UAAUnC,GAAE,EAAG,GAAG,GAAG,IAAI,EAAE+C,GAAE,EAAGC,GAAG,EAAEC,EAAE,SAASnD,EAAEC,GAAGgD,IAAIR,GAAG,SAASzC,GAAGkD,EAAElD,EAAEM,KAAK,IAAI2C,GAAE,GAAI,IAAI/C,EAAEC,EAAE,SAASF,GAAGiD,GAAG,GAAGlD,EAAEC,EAAE,EAAEiC,EAAE9B,EAAE,MAAM,GAAG+B,EAAE,EAAEC,EAAE,GAAGE,EAAE,SAAStC,GAAG,IAAIA,EAAEoD,eAAe,CAAC,IAAInD,EAAEmC,EAAE,GAAGjC,EAAEiC,EAAEA,EAAEiB,OAAO,GAAGlB,GAAGnC,EAAE2C,UAAUxC,EAAEwC,UAAU,KAAK3C,EAAE2C,UAAU1C,EAAE0C,UAAU,KAAKR,GAAGnC,EAAEM,MAAM8B,EAAEQ,KAAK5C,KAAKmC,EAAEnC,EAAEM,MAAM8B,EAAE,CAACpC,IAAImC,EAAED,EAAE5B,QAAQ4B,EAAE5B,MAAM6B,EAAED,EAAE1B,QAAQ4B,EAAElC,IAAI,CAAC,EAAEiD,EAAEnC,EAAE,eAAesB,GAAGa,IAAIjD,EAAE+B,EAAE9B,EAAE+B,EAAEjC,GAAGyB,GAAG,WAAWyB,EAAEG,cAAchC,IAAIgB,GAAGpC,GAAE,EAAG,IAAI6B,GAAG,WAAWI,EAAE,EAAEe,GAAG,EAAEhB,EAAE9B,EAAE,MAAM,GAAGF,EAAE+B,EAAE9B,EAAE+B,EAAEjC,EAAE,IAAI,EAAEsD,EAAE,CAACC,SAAQ,EAAGC,SAAQ,GAAIC,EAAE,IAAI/C,KAAKgD,EAAE,SAASxD,EAAEC,GAAGJ,IAAIA,EAAEI,EAAEH,EAAEE,EAAED,EAAE,IAAIS,KAAKiD,EAAE/B,qBAAqBgC,IAAI,EAAEA,EAAE,WAAW,GAAG5D,GAAG,GAAGA,EAAEC,EAAEwD,EAAE,CAAC,IAAItD,EAAE,CAAC0D,UAAU,cAAczD,KAAKL,EAAEwB,KAAKuC,OAAO/D,EAAE+D,OAAOC,WAAWhE,EAAEgE,WAAWrB,UAAU3C,EAAEqC,UAAU4B,gBAAgBjE,EAAEqC,UAAUpC,GAAGE,EAAE+D,SAAS,SAASlE,GAAGA,EAAEI,EAAE,IAAID,EAAE,EAAE,CAAC,EAAEgE,EAAE,SAASnE,GAAG,GAAGA,EAAEgE,WAAW,CAAC,IAAI/D,GAAGD,EAAEqC,UAAU,KAAK,IAAI1B,KAAKmC,YAAYlC,OAAOZ,EAAEqC,UAAU,eAAerC,EAAEwB,KAAK,SAASxB,EAAEC,GAAG,IAAIC,EAAE,WAAWyD,EAAE3D,EAAEC,GAAGG,GAAG,EAAED,EAAE,WAAWC,GAAG,EAAEA,EAAE,WAAWyB,oBAAoB,YAAY3B,EAAEqD,GAAG1B,oBAAoB,gBAAgB1B,EAAEoD,EAAE,EAAEzB,iBAAiB,YAAY5B,EAAEqD,GAAGzB,iBAAiB,gBAAgB3B,EAAEoD,EAAE,CAAhO,CAAkOtD,EAAED,GAAG2D,EAAE1D,EAAED,EAAE,CAAC,EAAE4D,EAAE,SAAS5D,GAAG,CAAC,YAAY,UAAU,aAAa,eAAekE,SAAS,SAASjE,GAAG,OAAOD,EAAEC,EAAEkE,EAAEZ,EAAE,GAAG,EAAEa,EAAE,SAASlE,EAAEgC,GAAG,IAAIC,EAAEC,EAAEE,IAAIG,EAAErC,EAAE,OAAO6C,EAAE,SAASjD,GAAGA,EAAE2C,UAAUP,EAAEI,kBAAkBC,EAAEnC,MAAMN,EAAEiE,gBAAgBjE,EAAE2C,UAAUF,EAAEjC,QAAQoC,KAAK5C,GAAGmC,GAAE,GAAI,EAAEe,EAAElC,EAAE,cAAciC,GAAGd,EAAEF,EAAE/B,EAAEuC,EAAEP,GAAGgB,GAAGxB,GAAG,WAAWwB,EAAEI,cAAchC,IAAI2B,GAAGC,EAAER,YAAY,IAAG,GAAIQ,GAAGnB,GAAG,WAAW,IAAIf,EAAEyB,EAAErC,EAAE,OAAO+B,EAAEF,EAAE/B,EAAEuC,EAAEP,GAAG/B,EAAE,GAAGF,GAAG,EAAED,EAAE,KAAK4D,EAAE9B,kBAAkBd,EAAEiC,EAAE9C,EAAEyC,KAAK5B,GAAG6C,GAAG,GAAG,EAAEQ,EAAE,CAAC,EAAEC,EAAE,SAAStE,EAAEC,GAAG,IAAIC,EAAEC,EAAEmC,IAAIJ,EAAE9B,EAAE,OAAO+B,EAAE,SAASnC,GAAG,IAAIC,EAAED,EAAE2C,UAAU1C,EAAEE,EAAEqC,kBAAkBN,EAAE5B,MAAML,EAAEiC,EAAE1B,QAAQoC,KAAK5C,GAAGE,IAAI,EAAEkC,EAAEpB,EAAE,2BAA2BmB,GAAG,GAAGC,EAAE,CAAClC,EAAE+B,EAAEjC,EAAEkC,EAAEjC,GAAG,IAAIwC,EAAE,WAAW4B,EAAEnC,EAAEzB,MAAM2B,EAAEkB,cAAchC,IAAIa,GAAGC,EAAEM,aAAa2B,EAAEnC,EAAEzB,KAAI,EAAGP,GAAE,GAAI,EAAE,CAAC,UAAU,SAASgE,SAAS,SAASlE,GAAG8B,iBAAiB9B,EAAEyC,EAAE,CAAC8B,MAAK,EAAGd,SAAQ,GAAI,IAAI/B,EAAEe,GAAE,GAAIV,GAAG,SAAS5B,GAAG+B,EAAE9B,EAAE,OAAOF,EAAE+B,EAAEjC,EAAEkC,EAAEjC,GAAG+C,uBAAuB,WAAWA,uBAAuB,WAAWd,EAAE5B,MAAMwC,YAAYlC,MAAMT,EAAEkC,UAAUgC,EAAEnC,EAAEzB,KAAI,EAAGP,GAAE,EAAG,GAAG,GAAG,GAAG,CAAC,EAAEsE,EAAE,SAASxE,GAAG,IAAIC,EAAEC,EAAEE,EAAE,QAAQH,EAAE,WAAW,IAAI,IAAIA,EAAE6C,YAAY2B,iBAAiB,cAAc,IAAI,WAAW,IAAIzE,EAAE8C,YAAY4B,OAAOzE,EAAE,CAAC6D,UAAU,aAAanB,UAAU,GAAG,IAAI,IAAIzC,KAAKF,EAAE,oBAAoBE,GAAG,WAAWA,IAAID,EAAEC,GAAGW,KAAK8D,IAAI3E,EAAEE,GAAGF,EAAE4E,gBAAgB,IAAI,OAAO3E,CAAC,CAAjL,GAAqL,GAAGC,EAAEI,MAAMJ,EAAEK,MAAMN,EAAE4E,cAAc3E,EAAEI,MAAM,GAAGJ,EAAEI,MAAMwC,YAAYlC,MAAM,OAAOV,EAAEM,QAAQ,CAACP,GAAGD,EAAEE,EAAY,CAAT,MAAMF,GAAG,CAAC,EAAE,aAAa2B,SAASmD,WAAWvC,WAAWtC,EAAE,GAAG6B,iBAAiB,QAAQ,WAAW,OAAOS,WAAWtC,EAAE,EAAE,GAAG,C","sources":["../node_modules/web-vitals/dist/web-vitals.js"],"sourcesContent":["var e,t,n,i,r=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:\"v2-\".concat(Date.now(),\"-\").concat(Math.floor(8999999999999*Math.random())+1e12)}},a=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if(\"first-input\"===e&&!(\"PerformanceEventTiming\"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},o=function(e,t){var n=function n(i){\"pagehide\"!==i.type&&\"hidden\"!==document.visibilityState||(e(i),t&&(removeEventListener(\"visibilitychange\",n,!0),removeEventListener(\"pagehide\",n,!0)))};addEventListener(\"visibilitychange\",n,!0),addEventListener(\"pagehide\",n,!0)},u=function(e){addEventListener(\"pageshow\",(function(t){t.persisted&&e(t)}),!0)},c=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},f=-1,s=function(){return\"hidden\"===document.visibilityState?0:1/0},m=function(){o((function(e){var t=e.timeStamp;f=t}),!0)},v=function(){return f<0&&(f=s(),m(),u((function(){setTimeout((function(){f=s(),m()}),0)}))),{get firstHiddenTime(){return f}}},d=function(e,t){var n,i=v(),o=r(\"FCP\"),f=function(e){\"first-contentful-paint\"===e.name&&(m&&m.disconnect(),e.startTime-1&&e(t)},f=r(\"CLS\",0),s=0,m=[],v=function(e){if(!e.hadRecentInput){var t=m[0],i=m[m.length-1];s&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(s+=e.value,m.push(e)):(s=e.value,m=[e]),s>f.value&&(f.value=s,f.entries=m,n())}},h=a(\"layout-shift\",v);h&&(n=c(i,f,t),o((function(){h.takeRecords().map(v),n(!0)})),u((function(){s=0,l=-1,f=r(\"CLS\",0),n=c(i,f,t)})))},T={passive:!0,capture:!0},y=new Date,g=function(i,r){e||(e=r,t=i,n=new Date,w(removeEventListener),E())},E=function(){if(t>=0&&t1e12?new Date:performance.now())-e.timeStamp;\"pointerdown\"==e.type?function(e,t){var n=function(){g(e,t),r()},i=function(){r()},r=function(){removeEventListener(\"pointerup\",n,T),removeEventListener(\"pointercancel\",i,T)};addEventListener(\"pointerup\",n,T),addEventListener(\"pointercancel\",i,T)}(t,e):g(t,e)}},w=function(e){[\"mousedown\",\"keydown\",\"touchstart\",\"pointerdown\"].forEach((function(t){return e(t,S,T)}))},L=function(n,f){var s,m=v(),d=r(\"FID\"),p=function(e){e.startTimeperformance.now())return;n.entries=[t],e(n)}catch(e){}},\"complete\"===document.readyState?setTimeout(t,0):addEventListener(\"load\",(function(){return setTimeout(t,0)}))};export{h as getCLS,d as getFCP,L as getFID,F as getLCP,P as getTTFB};\n"],"names":["e","t","n","i","r","name","value","delta","entries","id","concat","Date","now","Math","floor","random","a","PerformanceObserver","supportedEntryTypes","includes","self","getEntries","map","observe","type","buffered","o","document","visibilityState","removeEventListener","addEventListener","u","persisted","c","f","s","m","timeStamp","v","setTimeout","firstHiddenTime","d","disconnect","startTime","push","window","performance","getEntriesByName","requestAnimationFrame","p","l","h","hadRecentInput","length","takeRecords","T","passive","capture","y","g","w","E","entryType","target","cancelable","processingStart","forEach","S","L","b","F","once","P","getEntriesByType","timing","max","navigationStart","responseStart","readyState"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/static/js/main.f6d287f1.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ 2 | 3 | /** 4 | * @license React 5 | * react-dom.production.min.js 6 | * 7 | * Copyright (c) Facebook, Inc. and its affiliates. 8 | * 9 | * This source code is licensed under the MIT license found in the 10 | * LICENSE file in the root directory of this source tree. 11 | */ 12 | 13 | /** 14 | * @license React 15 | * react-jsx-runtime.production.min.js 16 | * 17 | * Copyright (c) Facebook, Inc. and its affiliates. 18 | * 19 | * This source code is licensed under the MIT license found in the 20 | * LICENSE file in the root directory of this source tree. 21 | */ 22 | 23 | /** 24 | * @license React 25 | * react.production.min.js 26 | * 27 | * Copyright (c) Facebook, Inc. and its affiliates. 28 | * 29 | * This source code is licensed under the MIT license found in the 30 | * LICENSE file in the root directory of this source tree. 31 | */ 32 | 33 | /** 34 | * @license React 35 | * scheduler.production.min.js 36 | * 37 | * Copyright (c) Facebook, Inc. and its affiliates. 38 | * 39 | * This source code is licensed under the MIT license found in the 40 | * LICENSE file in the root directory of this source tree. 41 | */ 42 | -------------------------------------------------------------------------------- /build/static/media/background.f8e0a3e86fb4252623af.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/static/media/background.f8e0a3e86fb4252623af.png -------------------------------------------------------------------------------- /build/static/media/jungle1.5ec83d96505269c854f3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/static/media/jungle1.5ec83d96505269c854f3.png -------------------------------------------------------------------------------- /build/static/media/jungle2.b3f7031947988987d357.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/static/media/jungle2.b3f7031947988987d357.png -------------------------------------------------------------------------------- /build/static/media/jungle3.5350abbda455914478ee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/static/media/jungle3.5350abbda455914478ee.png -------------------------------------------------------------------------------- /build/static/media/jungle4.80488612344ed2683ee6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/static/media/jungle4.80488612344ed2683ee6.png -------------------------------------------------------------------------------- /build/static/media/jungle5.6f841a2d5b2b021093df.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/static/media/jungle5.6f841a2d5b2b021093df.png -------------------------------------------------------------------------------- /build/static/media/logo_land.38bc453f18c7f64bebdc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/static/media/logo_land.38bc453f18c7f64bebdc.png -------------------------------------------------------------------------------- /build/static/media/man_on_mountain.41b59d37a39bb0b35f75.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/static/media/man_on_mountain.41b59d37a39bb0b35f75.png -------------------------------------------------------------------------------- /build/static/media/mountains.af6b8801f09352cf3f76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/build/static/media/mountains.af6b8801f09352cf3f76.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-parallax", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@react-spring/parallax": "^9.6.1", 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^13.4.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-scripts": "5.0.1", 13 | "react-spring": "^9.6.1", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/src/.DS_Store -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #textblock { 2 | background-color: #210002; 3 | height: 100vh; 4 | } 5 | 6 | #textblock-container { 7 | width: 50%; 8 | margin: 0 auto; 9 | padding-top: 70px; 10 | } 11 | 12 | #textblock-title { 13 | color: #ffaf1b; 14 | font-size: 35px; 15 | font-weight: 600; 16 | font-family: "Helvetica Neue"; 17 | } 18 | 19 | #textblock-content { 20 | color: #ffaf1b; 21 | font-size: 20px; 22 | } 23 | 24 | #textblock-footer { 25 | color: #ffaf1b; 26 | font-size: 15px; 27 | font-weight: 400; 28 | position: fixed; 29 | width: 100%; 30 | bottom: 0px; 31 | justify-content:center; 32 | align-items:center; 33 | text-align:center; 34 | margin-bottom: 20px; 35 | 36 | } 37 | 38 | #textblock-devsense { 39 | text-decoration: none; 40 | color: #ffaf1b; 41 | font-size: 15px; 42 | font-weight: 600; 43 | } 44 | 45 | .animation, .animation_layer { 46 | height: 1000px; 47 | } 48 | 49 | .animation { 50 | display: block; 51 | position: relative; 52 | z-index: 10; 53 | } 54 | 55 | .animation_layer { 56 | background-position: bottom center; 57 | background-size: auto 1038px; 58 | background-repeat: repeat-x; 59 | width: 100%; 60 | position: absolute; 61 | } 62 | .animation_layer.parallax { 63 | position: fixed; 64 | } 65 | 66 | #artback { 67 | background-image: url(./images/background.png); 68 | } 69 | 70 | #mountain { 71 | background-image: url(./images/mountains.png); 72 | } 73 | 74 | #logoland { 75 | background-image: url(./images/logo_land.png); 76 | } 77 | 78 | #jungle1 { 79 | background-image: url(./images/jungle1.png); 80 | } 81 | 82 | #jungle2 { 83 | background-image: url(./images/jungle2.png); 84 | } 85 | 86 | #jungle3 { 87 | background-image: url(./images/jungle3.png); 88 | } 89 | 90 | #jungle4 { 91 | background-image: url(./images/jungle4.png); 92 | } 93 | 94 | #jungle5 { 95 | background-image: url(./images/jungle5.png); 96 | } 97 | 98 | #manonmountain { 99 | background-image: url(./images/man_on_mountain.png); 100 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Parallax, ParallaxLayer } from '@react-spring/parallax' 2 | import TextBlock from './textBlock'; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 19 |
20 | 21 | 22 |
23 | 24 | 25 |
26 | 27 | 28 |
29 | 30 | 31 |
32 | 33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 |
41 | ); 42 | } 43 | 44 | export default App; 45 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/src/images/background.png -------------------------------------------------------------------------------- /src/images/jungle1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/src/images/jungle1.png -------------------------------------------------------------------------------- /src/images/jungle2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/src/images/jungle2.png -------------------------------------------------------------------------------- /src/images/jungle3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/src/images/jungle3.png -------------------------------------------------------------------------------- /src/images/jungle4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/src/images/jungle4.png -------------------------------------------------------------------------------- /src/images/jungle5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/src/images/jungle5.png -------------------------------------------------------------------------------- /src/images/logo_land.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/src/images/logo_land.png -------------------------------------------------------------------------------- /src/images/man_on_mountain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/src/images/man_on_mountain.png -------------------------------------------------------------------------------- /src/images/mountains.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashutosh1919/react-parallax-demo/9e729c3e83caad7921f17b89b11c772b9f91a3ab/src/images/mountains.png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/textBlock.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | 3 | function TextBlock() { 4 | return ( 5 |
6 |
7 |

What is Firewatch?

8 |

9 | The year is 1989.

10 | You are a man named Henry who has retreated from your messy life to work as a fire lookout in the Wyoming wilderness. Perched atop a mountain, it's your job to find smoke and keep the wilderness safe.

11 | An especially hot, dry summer has everyone on edge. Your supervisor, a woman named Delilah, is available to youat all times over a small, handheld radio—and is your only contact with the world you've left behind.

12 | But when something strange draws you out of your lookout tower and into the world below, you'll explore a wild and unknown environment, facing questions and making interpersonal choices that can build or destroy the only meaningful relationship you have. 13 |

14 |
15 | 16 |
17 | ); 18 | } 19 | 20 | export default TextBlock; --------------------------------------------------------------------------------