{"id":16924422,"url":"https://github.com/dgautsch/scrollfire","last_synced_at":"2025-04-05T14:10:23.518Z","repository":{"id":28775226,"uuid":"119198264","full_name":"dgautsch/scrollfire","owner":"dgautsch","description":"Fire functions on DOM elements as you scroll them into view.","archived":false,"fork":false,"pushed_at":"2023-01-03T20:31:47.000Z","size":838,"stargazers_count":1,"open_issues_count":14,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-26T14:05:23.568Z","etag":null,"topics":["javascript","scrollfire"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/dgautsch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-27T20:05:36.000Z","updated_at":"2023-03-07T03:37:48.000Z","dependencies_parsed_at":"2023-01-14T09:33:27.522Z","dependency_job_id":null,"html_url":"https://github.com/dgautsch/scrollfire","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgautsch%2Fscrollfire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgautsch%2Fscrollfire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgautsch%2Fscrollfire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgautsch%2Fscrollfire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dgautsch","download_url":"https://codeload.github.com/dgautsch/scrollfire/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345856,"owners_count":20924102,"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":["javascript","scrollfire"],"created_at":"2024-10-13T20:04:14.724Z","updated_at":"2025-04-05T14:10:23.501Z","avatar_url":"https://github.com/dgautsch.png","language":"JavaScript","readme":"# Scrollfire\n[![Known Vulnerabilities](https://snyk.io/test/github/dgautsch/scrollfire/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dgautsch/scrollfire?targetFile=package.json) [![npm version](https://badge.fury.io/js/scrollfire.svg)](https://badge.fury.io/js/scrollfire) [![CircleCI](https://circleci.com/gh/dgautsch/scrollfire/tree/master.svg?style=svg)](https://circleci.com/gh/dgautsch/scrollfire/tree/master)\n\nScrollfire allows you to set functions that will fire when specific DOM elements of your website come into a user's viewport. A typical use case would be an animation that needs to fire when the element comes into view.\n\nAfter writing this, I realized there is a jQuery equivalent with the same name. They accomplish the same thing, but this one doesn't require jQuery.\n\n## Example\n\nFirst initialize scrollfire\n\n```javascript\n  scrollfire.init()\n```\n\nPass in a jQuery element or regular Element to the addAction method.\n\n```javascript\n  var scrollfire = require('scrollfire')\n  scrollfire.addAction(Elem, {name: 'myName', method: myFunction})\n```\n\nYou can also remove actions later on if for some reason you don't want them to run. Pass in the action name you specified when you added it.\n\n```javascript\n  scrollfire.removeAction('actionName') // i.e. myName\n```\n\n### Configuration Options\n\nYou can initialize and pass a config option to to the init method. The two parameters that can be changed are `viewportTop` and `viewportBottom`.\n\n```javascript\n  var scrollfire = require('scrollfire')\n  scrollfire.init({\n    viewportTop: 0.1,\n    viewportBottom: 1\n  })\n```\nThis allows you to widen the viewport window for when the event actions fire. They are percentages of the top and bottom of the viewport. In the example above 0.1 would be the top 10% of the viewport and 1 would be the very bottom. The defaults are 0.3 and 0.6 respectively.\n\nIn addition to `name` and `method` you can pass in `persist` if you wish the action to fire for an unlimited number of times.\n\n```javascript\n  var scrollfire = require('scrollfire')\n  scrollfire.addAction(Elem, {name: 'myName', method: myFunction, persist: true})\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgautsch%2Fscrollfire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdgautsch%2Fscrollfire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgautsch%2Fscrollfire/lists"}