{"id":26326378,"url":"https://github.com/charmingdc/scrolljs","last_synced_at":"2025-03-15T19:38:33.927Z","repository":{"id":272084422,"uuid":"861662563","full_name":"Charmingdc/ScrollJs","owner":"Charmingdc","description":"ScrollJs: A lightweight and customizable JavaScript library for seamless scroll-triggered animations. Elevate your web projects with smooth effects, dynamic triggers, and ease of integration.","archived":false,"fork":false,"pushed_at":"2025-02-23T16:25:38.000Z","size":5387,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-23T16:30:29.316Z","etag":null,"topics":["aos-animation","javascript-library","open-source","scrolljs"],"latest_commit_sha":null,"homepage":"https://scrolljs.vercel.app","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/Charmingdc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2024-09-23T09:57:37.000Z","updated_at":"2025-02-23T16:25:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"3f36be0c-5730-46df-acd6-1354fa7d29da","html_url":"https://github.com/Charmingdc/ScrollJs","commit_stats":null,"previous_names":["charmingdc/scrolljs"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Charmingdc%2FScrollJs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Charmingdc%2FScrollJs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Charmingdc%2FScrollJs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Charmingdc%2FScrollJs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Charmingdc","download_url":"https://codeload.github.com/Charmingdc/ScrollJs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243784057,"owners_count":20347409,"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":["aos-animation","javascript-library","open-source","scrolljs"],"created_at":"2025-03-15T19:38:33.415Z","updated_at":"2025-03-15T19:38:33.909Z","avatar_url":"https://github.com/Charmingdc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/Charmingdc/ScrollJs/blob/0dd4bd3f4113ba3e67ee2f0af75252fde3b43bf9/docs/images/scrollJs.svg\" width=\"100px\" height=\"100px\" alt=\"ScrollJs icon\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e ScrollJs \u003c/h1\u003e\n\u003cp align=\"center\"\u003e ScrollJs is a lightweight and easy to use javascript library that allows you to add scroll triggered animations (AOS) with optional callback functions and also lazy load your images to make your website more optimize.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nWhile other scroll triggered animation library offer predefined animation classes not giving full control and how you want your animations to display, ScrollJs allows you to use your already styled animation class.\n\u003c/p\u003e\n\n# Installation \n\n## Browser\nA simple and fast way to get started is to include this script on your page\n\n``` html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/Charmingdc/ScrollJs@main/scroll.min.js\"\u003e\u003c/script\u003e\n```\nThis will create the global variable `ScrollObserver`\n\n## Module\n``` bash\n$ npm install @charmingdc/scrolljs\n```\n\n\n### CommonJs\n``` js\nconst ScrollObserver = require('@charmingdc/scrolljs')\n```\n\n### ES2015\n``` js\nimport ScrollObserver from '@charmingdc/scrolljs'\n```\n\n\u003cbr /\u003e\n\n# Usage\n\nInstallation provides us with the constructor function `ScrollObserver` Calling this function returns the ScrollObserver instance, the “brain” behind the magic.\n\u003e ScrollObserver employs the singleton pattern; no matter how many times the constructor is called, it will always return the same instance. This means we can call it anywhere, worry-free.\n\nThere’s a lot we can do with this instance, but most of the time we’ll be using the observer() method to create animation. Fundamentally, this is how to use ScrollObserver:\n\n`HTML`\n``` html\n\u003cdiv class='card'\u003e\n Demo Card\n\u003c/div\u003e\n```\n\n\u003cbr /\u003e\n\n`CSS`\n``` css\n.card {\n  width: 4rem;\n  height: 6rem;\n  background-color: blue;\n  border-radius: 1rem;\n  transform: translateX(-1rem);\n  transition: 200ms;\n}\n\n.fade-in {\n  transform: translateX(0rem);\n  transition: 200ms;\n} /* Animation to display when element enters viewport */\n```\n\n\u003cbr /\u003e\n\n`JAVASCRIPT`\n``` js\nconst cards = document.querySelectorAll('.card');\nScrollObserver().observe(cards, null, 'fade-in')\n```\nor store the `ScrollObserver` instance to a variable \n\n``` js\nconst observer = new ScrollObserver()\nobserver.observe(cards, null, 'fade-in');\n```\n\n\u003cbr /\u003e\n\n### Link to documentation \n\u003e The full documentation can be found at:\n\u003e\n[https://scrolljs.vercel.app](https://scrolljs.vercel.app)\n\n\u003cbr /\u003e\n\n\n# ChangeLog\n\u003e For a detailed list of changes please see:\n[Changelog](./CHANGELOG.md)\n\u003cbr /\u003e\n\n# License\nLicensed under the MIT license for open source projects\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharmingdc%2Fscrolljs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharmingdc%2Fscrolljs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharmingdc%2Fscrolljs/lists"}