{"id":21927787,"url":"https://github.com/christopherwk210/simpleparallax","last_synced_at":"2026-02-14T17:06:08.211Z","repository":{"id":97883435,"uuid":"81601818","full_name":"christopherwk210/SimpleParallax","owner":"christopherwk210","description":"SimpleParallax is a small, simple, easy to use scrolling parallax library.","archived":false,"fork":false,"pushed_at":"2017-02-10T21:05:46.000Z","size":37,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T19:36:21.862Z","etag":null,"topics":["javascript","parallax-scrolling"],"latest_commit_sha":null,"homepage":"https://christopherwk210.github.io/SimpleParallax/","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/christopherwk210.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,"zenodo":null}},"created_at":"2017-02-10T19:59:31.000Z","updated_at":"2022-04-26T11:22:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"031439bd-1949-4ed9-9998-90237e1853e1","html_url":"https://github.com/christopherwk210/SimpleParallax","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/christopherwk210/SimpleParallax","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherwk210%2FSimpleParallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherwk210%2FSimpleParallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherwk210%2FSimpleParallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherwk210%2FSimpleParallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christopherwk210","download_url":"https://codeload.github.com/christopherwk210/SimpleParallax/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherwk210%2FSimpleParallax/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29450633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T15:52:44.973Z","status":"ssl_error","status_checked_at":"2026-02-14T15:52:11.208Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","parallax-scrolling"],"created_at":"2024-11-28T22:17:35.013Z","updated_at":"2026-02-14T17:06:08.204Z","avatar_url":"https://github.com/christopherwk210.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SimpleParallax\n\nSimpleParallax is a small, simple, easy to use scrolling parallax library. It uses CSS3 transformations along with requestAnimationFrame to create buttery smooth animations, with zero dependencies. Get up and running in seconds.\n\n[Live Demo](https://christopherwk210.github.io/SimpleParallax/) | [Download minified JS (\u003c3kb)](https://raw.githubusercontent.com/christopherwk210/simpleparallax/master/dist/SimpleParallax.min.js)\n\n## Usage\n\nTo build locally:\n\n```\ngit clone https://github.com/christopherwk210/SimpleParallax.git\ncd SimpleParallax\nnpm i\nnpm start\n```\n\nTo use in your page:\n\n```html\n\u003cscript src=\"path/to/dist/SimpleParallax.min.js\"\u003e\u003c/script\u003e\n```\n\n# Getting Started\n\nThe most basic usage of SimpleParallax looks like this:\n\n```javascript\nvar parallax = new SimpleParallax({\n  element: document.getElementById('parallax-element')\n});\n```\n\nThis will initialize a new instance of SimpleParallax and add `#parallax-element` to the list of elements that are affected by the parallax effect. Since no speed is specified, the default speed is used.\n\nIf you later wish to add more elements, you can use the following:\n\n```javascript\nparallax.addElement({\n  element: document.getElementById('parallax-element')\n});\n```\n\nBoth the constructor and `addElement` optionally take an array of objects that can be used to add multiple elements at once:\n\n```javascript\nparallax.addElement([\n  {\n    element: document.getElementById('element-one')\n  },\n  {\n    element: document.getElementById('element-two')\n  }\n]);\n```\n\n## Options\n\nA number of optional parameters can be set when adding elements to a SimpleParallax instance.\n\n```javascript\nvar parallax = new SimpleParallax({\n  element: document.getElementById('element'),\n  speed: 0.5,\n  offset: function() {\n      return 20;\n  }\n});\n```\n\n**element** is the element to apply the parallax effect to.\n\n**speed** is the rate at which to apply the effect. The default value is 0.5, which will cause the element to move at 1.5 times the normal speed. If you wanted the element to move slower than usual rather than faster, you could use a negative value like -0.5. Note that if you wanted to the element to use an easing function for movement, you could add a transform to the transition property for that element's CSS.\n\n**offset** is a custom function that will change the offset of elements vertical position on the page. SimpleParallax will keep the element in it's exact position on the page when you would normally see it by scrolling down. If you wanted the element to line up with it's original position once that position was vertically centered, you could use this as your offset function:\n\n```javascript\nparallax.addElement({\n  element: document.getElementById('center-screen'),\n  offset: function() {\n      return window.innerHeight / 2;\n  }\n});\n```\n\n# Browser Compatibility\n\nSimpleParallax has been tested and confirmed to properly work in the latest versions of Chrome, Firefox, Safari, and iOS Safari. It should however work properly in all modern browsers, and any browser that works with the `translate3d` CSS syntax and `requestAnimationFrame` (vendor prefixes are dealt with automatically).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristopherwk210%2Fsimpleparallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristopherwk210%2Fsimpleparallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristopherwk210%2Fsimpleparallax/lists"}