{"id":15449376,"url":"https://github.com/timelytree/fluidscroll","last_synced_at":"2025-03-19T16:08:54.144Z","repository":{"id":87251409,"uuid":"86948488","full_name":"timelytree/FluidScroll","owner":"timelytree","description":"Parallax-style scroll using CSS translate","archived":false,"fork":false,"pushed_at":"2017-04-01T23:12:29.000Z","size":2,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-25T04:32:35.610Z","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/timelytree.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-01T23:11:41.000Z","updated_at":"2017-04-01T23:13:05.000Z","dependencies_parsed_at":"2023-05-27T02:45:09.302Z","dependency_job_id":null,"html_url":"https://github.com/timelytree/FluidScroll","commit_stats":{"total_commits":1,"total_committers":1,"mean_commits":1.0,"dds":0.0,"last_synced_commit":"d334277402ed434d65c693b6927dade4acb123bd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelytree%2FFluidScroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelytree%2FFluidScroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelytree%2FFluidScroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelytree%2FFluidScroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timelytree","download_url":"https://codeload.github.com/timelytree/FluidScroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244460236,"owners_count":20456301,"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-01T20:53:33.496Z","updated_at":"2025-03-19T16:08:54.114Z","avatar_url":"https://github.com/timelytree.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**Disclaimer**: the majority of this code was not written by me, it was written by [Bartek Drozdz](http://www.everyday3d.com/blog/index.php/2014/08/18/smooth-scrolling-with-virtualscroll/). I mostly just re-packaged it as a stand-alone library to make it easier to use.\n\nThere have been times when I'd stumble on a website on which the scroll feels slower, almost like wading through water. Although I won't talk about whether or not this is a good idea from a UX perspective (sometimes it's neat, sometimes it's annoying, that's all I'll say), I nonetheless set out to figure out how it's done; below is a tutorial and a javascript snippet outlining how to make this happen.\n\n## The Mechanics\n\nIn a gist, this effect is created by disabling native browser scrolling and instead mimicking scroll by enacting css translate (or transform3d) on an absolutely positioned element. This element contains all the content of the website, so it seems like it's being scrolled the natural way.\n\n## Setup\n\nBegin by including FluidScroll and creating a div that contains all your content:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"/js/fluidscroll.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"content\"\u003e\n  \u003ch1\u003eMy Website\u003c/h1\u003e\n  \u003cp\u003eHello World\u003c/p\u003e\n\u003c/div\u003e\n```\n\nMake sure the div is absolutely positioned:\n\n```css\n#content {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n```\n\nInitialize the scroll effect using the javascript function below. Speed values can be changed as you see fit:\n\n- Fast: 0.5\n- Normal: 0.07\n- Slow: 0.01\n\n```javascript\nvar container = document.getElementById('content'),\n    speed = 0.07;\n\nFluidScroll(container, speed);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimelytree%2Ffluidscroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimelytree%2Ffluidscroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimelytree%2Ffluidscroll/lists"}