{"id":13399040,"url":"https://github.com/janpaepke/ScrollMagic","last_synced_at":"2025-03-14T03:31:10.100Z","repository":{"id":10766292,"uuid":"13030144","full_name":"janpaepke/ScrollMagic","owner":"janpaepke","description":"The javascript library for magical scroll interactions.","archived":false,"fork":false,"pushed_at":"2024-04-07T16:52:26.000Z","size":5408,"stargazers_count":14750,"open_issues_count":518,"forks_count":2147,"subscribers_count":326,"default_branch":"master","last_synced_at":"2024-04-09T15:14:31.729Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://ScrollMagic.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/janpaepke.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2013-09-23T08:08:53.000Z","updated_at":"2024-06-18T11:05:12.795Z","dependencies_parsed_at":"2023-02-15T05:00:59.118Z","dependency_job_id":"511bd5a4-8fa4-40c2-a829-6f7deb6f70dc","html_url":"https://github.com/janpaepke/ScrollMagic","commit_stats":{"total_commits":622,"total_committers":39,"mean_commits":"15.948717948717949","dds":0.2186495176848875,"last_synced_commit":"591516529c2488d9c71bc5780851818e0f336952"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janpaepke%2FScrollMagic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janpaepke%2FScrollMagic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janpaepke%2FScrollMagic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janpaepke%2FScrollMagic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/janpaepke","download_url":"https://codeload.github.com/janpaepke/ScrollMagic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221432686,"owners_count":16820059,"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-07-30T19:00:33.668Z","updated_at":"2024-10-25T14:32:25.789Z","avatar_url":"https://github.com/janpaepke.png","language":"JavaScript","readme":"# ScrollMagic \u003ca href='https://github.com/janpaepke/ScrollMagic/blob/master/CHANGELOG.md' class='version' title='Whats New?'\u003ev2.0.8\u003c/a\u003e [![Build Status](https://api.travis-ci.org/janpaepke/ScrollMagic.svg?branch=master)](https://travis-ci.org/janpaepke/ScrollMagic)\n\n### The javascript library for magical scroll interactions.\n\n[![Donate](https://scrollmagic.io/assets/img/btn_donate.svg 'Shut up and take my money!')](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=8BJC8B58XHKLL 'Shut up and take my money!')\n\n**Quicklinks:** [About](#about-the-library) | [Download](#availability) | [Installation](#installation) | [Usage](#usage) | [Help](#help) | [Compatibility](#browser-support) | [Author](#about-the-author) | [License](#license) | [Thanks](#thanks)\n\n---\n\n### 🚨 **ScrollMagic 3.0 is on the horizon.** [Helpers \u0026 Testers wanted](https://github.com/janpaepke/ScrollMagic/issues/982)! 🚨\n\n---\n\nScrollMagic helps you to easily react to the user's current scroll position.  \nIt's the perfect library for you, if you want to ...\n\n-   animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control).\n-   pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky elements).\n-   toggle CSS classes of elements on and off based on scroll position.\n-   effortlessly add parallax effects to your website.\n-   create an infinitely scrolling page (ajax load of additional content).\n-   add callbacks at specific scroll positions or while scrolling past a specific section, passing a progress parameter.\n\nCheck out [the demo page](http://scrollmagic.io), browse [the examples](http://scrollmagic.io/examples/index.html) or read [the documentation](http://scrollmagic.io/docs/index.html) to get started.  \nIf you want to contribute please [get in touch](mailto:e-mail@janpaepke.de) and let me know about your specialty and experience.\n\n## About the Library\n\nScrollMagic is a scroll interaction library.\n\nIt's a complete rewrite of its predecessor [Superscrollorama](https://github.com/johnpolacek/superscrollorama) by [John Polacek](http://johnpolacek.com).  \nA plugin-based architecture offers easy customizability and extendability.\n\nTo implement animations, ScrollMagic can work with multiple frameworks.\nThe recommended solution is the [Greensock Animation Platform (GSAP)](http://www.greensock.com/gsap-js/) due to its stability and feature richness. For a more lightweight approach, the [VelocityJS](http://VelocityJS.org) framework is also supported. Alternatively, custom extensions can be implemented or the necessity of a framework can be completely avoided by animating simply using CSS and class toggles.\n\nScrollMagic was developed with these principles in mind:\n\n-   optimized performance\n-   lightweight (6KB gzipped)\n-   flexibility and extendibility\n-   mobile compatibility\n-   event management\n-   support for responsive web design\n-   object-oriented programming and object chaining\n-   readable, centralized code, and intuitive development\n-   support for both x and y direction scrolling (even both on one page)\n-   support for scrolling inside div containers (even multiple on one page)\n-   extensive debugging and logging capabilities\n-   detailed documentation\n-   many application examples\n\n**Is ScrollMagic the right library for you?**  \nScrollMagic takes an object-oriented approach using a controller for each scroll container and attaching multiple scenes defining what should happen at what part of the page. While this offers a great deal of control, it might be a little confusing, especially if you're just starting out with javascript.  \nIf the above points are not crucial for you and you are just looking for a simple solution to implement css animations I would strongly recommend taking a look at the awesome [skrollr](http://prinzhorn.github.io/skrollr/) project. It almost solely relies on element attributes and thus requires minimal to no javascript knowledge.\n\n## Availability\n\nTo get your copy of ScrollMagic you have the choice between four options:\n\n**Option 1: GitHub**  \nDownload a zip file containing the source code, demo page, all examples and documentation from the [GitHub releases page](https://github.com/janpaepke/ScrollMagic/releases) or clone the package to your machine using the git command line interface:\n\n```bash\ngit clone https://github.com/janpaepke/ScrollMagic.git\n```\n\n**Option 2: Bower**  \nScrollMagic is also [available on bower](http://bower.io/search/?q=scrollmagic) and will only install the necessary source code, ignoring all example and documentation files.  \nPlease mind that since they are not core dependencies, you will have to add frameworks like GSAP, jQuery or Velocity manually, should you choose to use them.\n\n```bash\nbower install scrollmagic\n```\n\n**Option 3: npm**  \nIf you prefer the [node package manager](https://www.npmjs.com/package/scrollmagic), feel free to use it.  \nKeep in mind that like with bower non-crucial files will be ignored (see above).\n\n```bash\nnpm install scrollmagic\n```\n\n**Option 4: CDN**  \nIf you don't want to host ScrollMagic yourself, you can include it from [cdnjs](https://cdnjs.com/libraries/ScrollMagic):\n\n```\nhttps://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js\n```\n\nAll plugins and uncompressed files are also available on cdnjs.  \nFor example:\n\n```\nhttps://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js\nhttps://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js\n```\n\n## Installation\n\nInclude the **core** library in your HTML file:\n\n```html\n\u003cscript src=\"js/scrollmagic/uncompressed/ScrollMagic.js\"\u003e\u003c/script\u003e\n```\n\nAnd you're ready to go!  \nFor deployment use the minified version **instead**:\n\n```html\n\u003cscript src=\"js/scrollmagic/minified/ScrollMagic.min.js\"\u003e\u003c/script\u003e\n```\n\n_**NOTE:** The logging feature is removed in the minified version due to file size considerations._\n\nTo use **plugins** like the indicators visualization, simply include them in addition to the main library:\n\n```html\n\u003cscript src=\"js/scrollmagic/uncompressed/plugins/debug.addIndicators.js\"\u003e\u003c/script\u003e\n```\n\nTo learn how to configure **RequireJS**, when using AMD, please [read here](https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-Using-AMD).\n\n## Usage\n\nThe basic ScrollMagic design pattern is one controller, which has one or more scenes attached to it.  \nEach scene is used to define what happens when the container is scrolled to a specific offset.\n\nHere's a basic workflow example:\n\n```javascript\n// init controller\nvar controller = new ScrollMagic.Controller();\n\n// create a scene\nnew ScrollMagic.Scene({\n\tduration: 100, // the scene should last for a scroll distance of 100px\n\toffset: 50, // start this scene after scrolling for 50px\n})\n\t.setPin('#my-sticky-element') // pins the element for the the scene's duration\n\t.addTo(controller); // assign the scene to the controller\n```\n\nTo learn more about the ScrollMagic code structure, please [read here](https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-How-to-use-ScrollMagic).\n\n## Help\n\nTo get started, check out the available learning resources [in the wiki section](https://github.com/janpaepke/ScrollMagic/wiki).  \nBe sure to have a look at the [examples](http://janpaepke.github.io/ScrollMagic/examples/index.html) to get source code pointers and make use of the [documentation](http://janpaepke.github.io/ScrollMagic/docs/index.html) for a complete reference.\n\nIf you run into trouble using ScrollMagic please follow the [Troubleshooting guide](https://github.com/janpaepke/ScrollMagic/wiki/Troubleshooting-Guide).\n\n**Please do not post support requests in the github issue section**, as it's reserved for issue and bug reporting.\nIf all the above options for self-help fail, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/scrollmagic) or the [ScrollMagic Premium Support](https://support.scrollmagic.io/?utm_source=github\u0026utm_medium=link).\n\n## Browser Support\n\nScrollMagic aims to support all major browsers even in older versions:  \nFirefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+\n\n## About the Author\n\nI am a creative coder based in Vienna, Austria.\n\n[Learn more on my website](http://www.janpaepke.de) or [Follow me on Twitter](http://twitter.com/janpaepke)\n\n## License\n\nScrollMagic is dual licensed under the MIT license and GPL.  \nFor more information click [here](https://github.com/janpaepke/ScrollMagic/blob/master/LICENSE.md).\n\n## Thanks\n\nThis library was made possible by many people who have supported it with passion, donations, or advice. Special thanks go out to [John Polacek](https://github.com/johnpolacek), [Jack Doyle](https://github.com/greensock), [Paul Irish](https://github.com/paulirish), [Nicholas Cerminara](https://github.com/ncerminara), [Kai Dorschner](https://github.com/krnlde), [Petr Tichy](https://github.com/petr-tichy) and [Dennis Gaebel](https://github.com/grayghostvisuals).\n","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=8BJC8B58XHKLL"],"categories":["JavaScript","效果类","目录","Web Development","TypeScript","13. 页面交互","Programming Languages","Web 前端","Computer Networking and Security","Table of Contents","Animate on scroll"],"sub_categories":["框架、库和组件","C++/C Toolkit","13.9 滚动侦测(ScrollSpy) ###","JavaScript","Scroll Animation Libraries","13.9 滚动侦测(ScrollSpy)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanpaepke%2FScrollMagic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjanpaepke%2FScrollMagic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanpaepke%2FScrollMagic/lists"}