{"id":22279253,"url":"https://github.com/19h47/scroll-you-fools","last_synced_at":"2025-07-28T18:31:33.737Z","repository":{"id":32851913,"uuid":"144407094","full_name":"19h47/scroll-you-fools","owner":"19h47","description":"⬆️⬇️ Playing with two columns with inverted scroll","archived":false,"fork":false,"pushed_at":"2023-01-06T02:40:19.000Z","size":1626,"stargazers_count":5,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T06:07:26.463Z","etag":null,"topics":["inertia","inertia-scroll","scroll","scrolling","vertical"],"latest_commit_sha":null,"homepage":"https://19h47.github.io/scroll-you-fools/","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/19h47.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":"2018-08-11T17:57:32.000Z","updated_at":"2022-05-25T08:48:14.000Z","dependencies_parsed_at":"2023-01-14T22:30:59.201Z","dependency_job_id":null,"html_url":"https://github.com/19h47/scroll-you-fools","commit_stats":null,"previous_names":["19h47/reverse-scroll"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2Fscroll-you-fools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2Fscroll-you-fools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2Fscroll-you-fools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/19h47%2Fscroll-you-fools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/19h47","download_url":"https://codeload.github.com/19h47/scroll-you-fools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227942011,"owners_count":17844698,"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":["inertia","inertia-scroll","scroll","scrolling","vertical"],"created_at":"2024-12-03T15:18:47.706Z","updated_at":"2024-12-03T15:18:48.436Z","avatar_url":"https://github.com/19h47.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scroll, you fools\n\n\u003e Scrollez, pauvres fous\n\nTwo columns, one scroll.\n\n![Scroll, you fools](screenshot.jpg)\n\nReverses scroll for two columns.\n\n## Installation\n\n```\nnpm install scroll-you-fools\n```\n\n## Usage\n\n### JavaScript\n\n```javascript\nconst container = document.getElementsByClassName('js-container')[0];\nconst options = {};\nconst scrollYouFools = new ScrollYouFools.default(container, options);\n```\n\n### CSS\n\n```css\n\nbody {\n\toverflow: hidden;\n}\n\n// Utilities\n.h-xs-100 {\n\theight: 100%;\n}\n\n.scroll-you-fools {\n\tposition: relative;\n\theight: 100vh;\n}\n\n.scroll-you-fools__columns {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n}\n\n.scroll-you-fools__row {\n\tposition: absolute;\n\tright: 0;\n\tleft: 0;\n\tmargin-right: 15px;\n\tmargin-left: 15px;\n}\n\n.scroll-you-fools__row--left {\n\ttop: 100%;\n\ttransform: translate3d( 0, 100%, 0 );\n}\n\n.scroll-you-fools__row--right {\n\tbottom: 100%;\n\ttransform: translate3d( 0, -100%, 0 );\n}\n\n.scroll-you-fools__column {\n\tpadding-top: 12vh;\n\tpadding-bottom: 12vh;\n\n\talign-items: center;\n\theight: 100vh;\n}\n\n.scroll-you-fools__image {\n\theight: 100%;\n\twidth: 100%;\n\n\tmax-width: 100%;\n\n\tobject-position: center;\n}\n\n```\n\n### HTML\n\n```html\n\n\u003cdiv class=\"scroll-you-fools\"\u003e\n\t\u003cdiv class=\"scroll-you-fools__columns js-container container-fluid\"\u003e\n\t\t\u003cdiv class=\"row h-xs-100\"\u003e\n\t\t\t\u003cdiv class=\"col-5 offset-1 h-xs-100\"\u003e\n\t\t\t\t\u003cdiv class=\"scroll-you-fools__row scroll-you-fools__row--left js-row-left\"\u003e\n\t\t\t\t\t\u003cdiv class=\"scroll-you-fools__column\"\u003e\n\t\t\t\t\t\t\u003cimg\n\t\t\t\t\t\t\tclass=\"scroll-you-fools__image\"\n\t\t\t\t\t\t\tsrc=\"https://picsum.photos/528/348\"\n\t\t\t\t\t\t\twidth=\"528\"\n\t\t\t\t\t\t\theight=\"348\"\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t/\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-12 col-lg-5 h-xs-100\"\u003e\n\t\t\t\t\u003cdiv class=\"scroll-you-fools__row scroll-you-fools__row--right js-row-right\"\u003e\n\t\t\t\t\t\u003cdiv class=\"scroll-you-fools__column\"\u003e\n\t\t\t\t\t\t\u003cimg\n\t\t\t\t\t\t\tclass=\"scroll-you-fools__image\"\n\t\t\t\t\t\t\tsrc=\"https://picsum.photos/528/348\"\n\t\t\t\t\t\t\twidth=\"528\"\n\t\t\t\t\t\t\theight=\"348\"\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t/\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n\n```\n\n## Options\n\n## Example\n\nAn example is located right [here](https://19h47.github.io/scroll-you-fools/), see [sources](/example/index.html).\n\n## Authors\n\n## Acknowledgments\n\n- [Corentin Fardeau](https://github.com/Corentinfardeau/horizontal-scroll), so inspiring\n\n## To do\n\n- [ ] Remove [Bootstrap](https://getbootstrap.com/) dependency\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F19h47%2Fscroll-you-fools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F19h47%2Fscroll-you-fools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F19h47%2Fscroll-you-fools/lists"}