{"id":16347401,"url":"https://github.com/cuth/parallax-banners","last_synced_at":"2025-10-04T16:40:38.912Z","repository":{"id":11143499,"uuid":"13510292","full_name":"cuth/parallax-banners","owner":"cuth","description":"This script does a parallax effect similar to spotify.com","archived":false,"fork":false,"pushed_at":"2014-04-23T03:20:57.000Z","size":1144,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-28T06:11:51.601Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cuth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-11T21:37:53.000Z","updated_at":"2015-04-07T21:04:22.000Z","dependencies_parsed_at":"2022-09-23T19:20:25.041Z","dependency_job_id":null,"html_url":"https://github.com/cuth/parallax-banners","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fparallax-banners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fparallax-banners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fparallax-banners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fparallax-banners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cuth","download_url":"https://codeload.github.com/cuth/parallax-banners/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239565663,"owners_count":19660158,"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":[],"created_at":"2024-10-11T00:42:04.504Z","updated_at":"2025-10-04T16:40:33.832Z","avatar_url":"https://github.com/cuth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Parallax Banners\n\nThis script does a parallax effect similar to spotify.com. You create frame element with an element inside of it that is larger than the frame. The script will position the element inside the frame as the window is scrolled as to show the whole element from when the top of the frame reaches the bottom of the window to when the bottom of the frame reaches the top of the window.\n\n### Set Up\n\n```html\n\u003cscript src=\"path/to/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/ParallaxBanners.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    new ParallaxBanners('.frame','img', { allowReverse: true });\n\u003c/script\u003e\n```\n\nFirst parameter is a selector, jQuery object or DOM element.\n\nSecond parameter is a selector starting from the first parameter element.\n\nThird parameter allows you to change the default options.\n```javascript\nvar defaults = {\n    allowReverse: false,\n    allowStick: false,\n    usePositionTop: false,\n    offMediaQuery: '',\n    activeClassName: '_parallaxed',\n    onWindowLoad: false\n}\n```\n\nCall these public methods on the instance.\n```javascript\nvar instance = new ParallaxBanners('.Frames','.tallElements');\n\n// Re-measure the heights of the Frames and tallElements and browser window and position of the Frames\ninstance.measure();\n\n// Calculate the new position of all the tallElements depending on window scrollTop.\ninstance.calcAllPos();\n\n// Turn the parallax effect off\ninstance.turnSwitch(true);\n\n// or back on\ninstance.turnSwitch(false);\n```\n\nUpdate and add this CSS for the elements that are parallaxed.\n```css\n._parallaxed {\n    position: fixed !important;\n    z-index: 100;\n    left: 0;\n    width: 100%;\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuth%2Fparallax-banners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuth%2Fparallax-banners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuth%2Fparallax-banners/lists"}