{"id":27768029,"url":"https://github.com/koddr/just-scroll","last_synced_at":"2025-07-27T18:08:49.311Z","repository":{"id":57287430,"uuid":"78224827","full_name":"koddr/just-scroll","owner":"koddr","description":"Simple indicate the possibility of scrolling on a page with СSS3 animation.","archived":false,"fork":false,"pushed_at":"2021-05-06T18:56:14.000Z","size":22,"stargazers_count":34,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-02T00:43:46.043Z","etag":null,"topics":["animated-elements","css3-animations","sass","scrolling"],"latest_commit_sha":null,"homepage":"","language":"Sass","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/koddr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":"koddr","open_collective":null,"ko_fi":null,"tidelift":null,"custom":null}},"created_at":"2017-01-06T17:25:16.000Z","updated_at":"2022-07-05T15:22:06.000Z","dependencies_parsed_at":"2022-09-16T06:54:24.919Z","dependency_job_id":null,"html_url":"https://github.com/koddr/just-scroll","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/koddr/just-scroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koddr%2Fjust-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koddr%2Fjust-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koddr%2Fjust-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koddr%2Fjust-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koddr","download_url":"https://codeload.github.com/koddr/just-scroll/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koddr%2Fjust-scroll/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267400333,"owners_count":24081182,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["animated-elements","css3-animations","sass","scrolling"],"created_at":"2025-04-29T19:59:10.375Z","updated_at":"2025-07-27T18:08:49.259Z","avatar_url":"https://github.com/koddr.png","language":"Sass","funding_links":["https://patreon.com/koddr","https://paypal.me/koddr?locale.x=en_EN"],"categories":[],"sub_categories":[],"readme":"![just-scroll-sass-logo-github](https://user-images.githubusercontent.com/11155743/31406214-388f0f6a-ae09-11e7-9c01-89095f67831a.jpg)\n\n# Just Scroll [![npm version](https://badge.fury.io/js/just-scroll.svg)](https://badge.fury.io/js/just-scroll)\n\nSimple indicate the possibility of scrolling on a page with СSS3 animation.\n\n## Features\n\n* Work on all modern and many older browsers\n* Have _SASS_ version for re-build (developers only)\n* Include colors, helpers and more stuff\n* Support for your issues\n\n**Desktop browsers support**\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png\" alt=\"IE\" width=\"36px\" height=\"36px\" /\u003e](http://godban.github.io/browsers-support-badges/) | [\u003cimg src=\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png\" alt=\"Firefox\" width=\"36px\" height=\"36px\" /\u003e](http://godban.github.io/browsers-support-badges/) | [\u003cimg src=\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png\" alt=\"Chrome\" width=\"36px\" height=\"36px\" /\u003e](http://godban.github.io/browsers-support-badges/) | [\u003cimg src=\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png\" alt=\"Safari\" width=\"36px\" height=\"36px\" /\u003e](http://godban.github.io/browsers-support-badges/) | [\u003cimg src=\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png\" alt=\"Opera\" width=\"36px\" height=\"36px\" /\u003e](http://godban.github.io/browsers-support-badges/) |\n| --------- | --------- | --------- | --------- | --------- |\n| 10+ | 16+ | 3+ | 5+ | 12.10+ |\n\n**Mobile browsers support**\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png\" alt=\"Firefox Mobile\" width=\"36px\" height=\"36px\" /\u003e](http://godban.github.io/browsers-support-badges/) | [\u003cimg src=\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome-android.png\" alt=\"Chrome for Android\" width=\"36px\" height=\"36px\" /\u003e](http://godban.github.io/browsers-support-badges/) | [\u003cimg src=\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari-ios.png\" alt=\"iOS Safari\" width=\"36px\" height=\"36px\" /\u003e](http://godban.github.io/browsers-support-badges/) | [\u003cimg src=\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera-mini.png\" alt=\"Opera Mini\" width=\"36px\" height=\"36px\" /\u003e](http://godban.github.io/browsers-support-badges/) |\n| --------- | --------- | --------- | --------- |\n| 16+ | 2+ | 4+ | 12.10+ |\n\n## How to use?\n\n* First, install from `npm` to your project:\n\n```\n$ npm install just-scroll --save\n```\n\n* Next, import `just-scroll` to your builded _SASS_ (or _SCSS_) file:\n\n```sass\n@import('just-scroll')\n```\n\n* Good. Now, add special container with `.just-scroll`, `.to-down` (or `.to-up` if you want to indicate _scroll up_ action) and `.color-*` classes:\n\n```html\n\u003cdiv class=\"just-scroll to-down color-black\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n* And finally, place animated element into `.just-scroll` container:\n\n```html\n\u003cdiv class=\"just-scroll to-down color-black\"\u003e\n  \u003cdiv class=\"mouse-icon\"\u003e\n    \u003cdiv class=\"wheel\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### More options?\n\nJust add this class to `.just-scroll` container:\n\n#### .to-*\n\n| CSS Class | Description |\n| --------- | --------- |\n| `.to-up` | Animation scroll up |\n| `.to-down` | Animation scroll down |\n\n#### .color-*\n\n| CSS Class | Description | Value |\n| --------- | --------- | --------- |\n| `.color-black` | Black color | `rgba(0, 0, 0, 1)` |\n| `.color-white` | White color | `rgba(255, 255, 255, 1)` |\n| `.color-green` | Green color | `rgba(35, 209, 96, 1)` |\n\n#### .centered\n\n| CSS Class | Description | Value |\n| --------- | --------- | --------- |\n| `.centered` | Place `.just-scroll` container to center of parent html element | `margin: 0 auto` |\n\n## Animated elements\n\n#### .mouse-icon\n\n```html\n\u003cdiv class=\"mouse-icon\"\u003e\n  \u003cdiv class=\"wheel\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Author \u0026 maintainers\n\nDevelopment and maintenance engaged by [Vic Shóstak](https://github.com/koddr) (aka Koddr).\n\nIf you want to say «thank you» or/and support active development `Just Scroll` — send to project's author some money via PayPal: [@paypal.me/koddr](https://paypal.me/koddr?locale.x=en_EN).\n\n[![DigitalOcean Referral Badge](https://web-platforms.sfo2.digitaloceanspaces.com/WWW/Badge%202.svg)](https://www.digitalocean.com/?refcode=b41859fa9b6e\u0026utm_campaign=Referral_Invite\u0026utm_medium=Referral_Program\u0026utm_source=badge)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoddr%2Fjust-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoddr%2Fjust-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoddr%2Fjust-scroll/lists"}