{"id":20419135,"url":"https://github.com/sfatihk/react-world","last_synced_at":"2025-04-07T16:18:21.702Z","repository":{"id":39010933,"uuid":"191056599","full_name":"sfatihk/react-world","owner":"sfatihk","description":"✨🌌 A different web experience in 8 bit React.js World","archived":false,"fork":false,"pushed_at":"2023-03-05T16:27:28.000Z","size":8281,"stargazers_count":321,"open_issues_count":19,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-31T14:11:26.416Z","etag":null,"topics":["animation","darth-vader","gandalf","hacktoberfest","pacman","react","reactjs","scroll","styled-components","supermario","wall-e"],"latest_commit_sha":null,"homepage":"https://sfatihk.github.io/react-world/#","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sfatihk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-09T21:22:07.000Z","updated_at":"2025-02-13T00:05:07.000Z","dependencies_parsed_at":"2024-11-21T03:31:47.622Z","dependency_job_id":null,"html_url":"https://github.com/sfatihk/react-world","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfatihk%2Freact-world","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfatihk%2Freact-world/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfatihk%2Freact-world/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfatihk%2Freact-world/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sfatihk","download_url":"https://codeload.github.com/sfatihk/react-world/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247685628,"owners_count":20979085,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","darth-vader","gandalf","hacktoberfest","pacman","react","reactjs","scroll","styled-components","supermario","wall-e"],"created_at":"2024-11-15T06:36:01.992Z","updated_at":"2025-04-07T16:18:21.674Z","avatar_url":"https://github.com/sfatihk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"resources/react-world-banner.png\"/\u003e\n\n## Few layers, scroll event manipulations and of course famous movie and game characters. [ Live Demo](https://sfatihk.github.io/react-world/#)\n\n\u003cimg src=\"resources/preview.gif\"/\u003e\n\n---\n\nThis document aims to explain how **React World** works.\n\nThere are 4 topics: **withScroll**, **SceneObject**, **MainLayer** and **Player**\n\n## withScroll\n\n- Scroll event handling and computing processes takes place within this component.\n- And re-adjust page height for scroll manipulation. (or fake scroll page)\n- **withScroll** is [High Order Component(HOC)](https://tr.reactjs.org/docs/higher-order-components.html) and provides onScrolling, scroll and scrollDirection datas to **wrapped component**. Also it covered whole **App**.\n\n---\n\nusage :\n\n```js\nimport withScroll from \"./withScroll\";\n\nclass wrappedComp ...{\n    ...\n\n    const {scroll,onScrolling,scrollDirection} = this.props\n\n    ...\n}\n\nexport default withScroll(wrappedComp);\n```\n\n---\n\nwithScroll props :\n\n| attribute       | type    | return                |\n| --------------- | ------- | --------------------- |\n| onScrolling     | boolean | true/false            |\n| scroll          | float   | between [0-maxScroll] |\n| scrollDirection | integer | 0(right), 1(left)     |\n\n## SceneObject\n\n\u003cimg align=\"right\" src=\"resources/sceneObject.png\" width=\"100\" height=\"100\"/\u003e\n\n- I created a standard for inter-component compatibility. Then i called it SceneObject, like GameObject in Unity Game Engine.\n- Every components are derived from the SceneObject.\n- You can set component position, scale and rotation easily.\n\n---\n\nusage :\n\n```js\nimport SceneObject from \"./SceneObject\";\n\nconst Enemy = props =\u003e {\n  return (\n    \u003cSceneObject\n      name=\"Enemy\"\n      transform={{\n        position: props.transform.position, //or {x:100,y:\"50%\"}\n        scale: { x: 200, y: 203 }, //or {x:\"100%,y:\"100%\"}\n        rotation: 180,\n        opacity: 1\n      }}\n      bgRepeat={false}\n      color={\"none\"}\n      imgUrl={enemyPicture}\n      animation={props.canAnimate ? animateNow : \"\"}\n    /\u003e\n  );\n};\n\nexport default Enemy;\n```\n\n---\n\nSceneObject options :\n\n| option                 | name                      | format             | default |\n| ---------------------- | ------------------------- | ------------------ | ------- |\n| **transform**          | position,scale \u0026 rotation | object             | none    |\n| **transform.position** | left \u0026 bottom             | {x : any, y : any} | unset   |\n| **transform.scale**    | width \u0026 height            | {x : any, y : any} | unset   |\n| **transform.rotation** | transform: rotate()       | numeric            | 0       |\n| **opacity**            | opacity                   | numeric [0-1]      | unset   |\n| **color**              | background-color          | html color         | none    |\n| **imgUrl**             | background                | numeric            | none    |\n| **bgRepeat**           | background-repeat         | boolean            | false   |\n| **animation**          | animation                 | css animation      | none    |\n\n## Main Layers\n\n\u003cimg src=\"resources/react-world-layer-detail.png\" width=\"600\" /\u003e\n\n- There are 3 main layers. Sky,Environment and Ground.\n- Scenes are defined in the main layers, so if main layer move whole scene will move.\n- Every main layer has a **animations** structure, like movement instructions.\n- The behavior related to scroll movement is defined in this structure.\n- **Animations**, includes start-finish scroll ranges and start-finish layer position.\n- **Animation Calculation** function calculates every scroll movement steps and returns the new position.\n\n---\n\nexample of animation structure :\n\n```js\n//...\nthis.animations = {\n      //it will swipe ground layer -10000px on x axis at 0-5050 scroll range\n      //wont move on y axis\n      \"0-5050\": { position: { x: [0, -10000], y: [0, 0] } },\n\n      //it will swipe ground layer -10000px to -15000 on x axis and\n      //it will swipe ground layer 700px on x yxis at at 5050-7050 scroll range and,\n      \"5050-7050\": { position: { x: [-10000, -15000], y: [0, 700] } },\n    };\n  }\n\n  //will calculate when scroll change\n  shouldComponentUpdate(nextProps, nextState) {\n    if (this.props.scroll !== nextProps.scroll) {\n      this.transform = AnimateCalculation(this.animations, nextProps.scroll);\n      return true;\n    }\n\n    return false;\n  }\n```\n\n## Player\n\n\u003cimg src=\"resources/mario.png\" height=\"200\" /\u003e\n\n- Player is actually a main layer. But didn't move x or y axis.\n- Player includes 2 animations: hero/skin changing and jumping, and they defined in **animation** structure.\n\n---\n\nanimations example in for jump\n\n```js\nconst animations = {\n  //vader jumps\n  \"8000-8650\": { startHeight: 200, endHeight: 100, type: \"fall\" },\n  \"8700-9320\": { startHeight: 100, endHeight: 200, type: \"jump\" },\n  \"9370-9800\": { startHeight: 200, endHeight: 100, type: \"fall\" },\n...\n}\n```\n\n---\n\nanimations example in hero/skin changing and walking\n\n```js\nconst heroes = {\n  gandalf: {\n    speed: 30,\n    delimiter: 10, // speed / step\n    frames: [\n      [gandalf_01, gandalf_02, gandalf_03],\n      [gandalf_11, gandalf_12, gandalf_13]\n    ] //left - right\n  }\n  ...\n}\n...\nconst heroesShowUp = {\n  \"0-7050\": { hero: \"gandalf\" },\n  \"7050-12100\": { hero: \"vader\" },\n\n```\n\n## I hope you enjoyed it\n\nYou can visit to [Thanks List](/THANKS.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsfatihk%2Freact-world","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsfatihk%2Freact-world","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsfatihk%2Freact-world/lists"}