{"id":21387631,"url":"https://github.com/nju33/hanko","last_synced_at":"2026-01-04T04:02:50.997Z","repository":{"id":57146406,"uuid":"86175180","full_name":"nju33/hanko","owner":"nju33","description":"Do various things at the scroll position","archived":false,"fork":false,"pushed_at":"2017-04-15T04:20:56.000Z","size":1868,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-23T00:14:46.314Z","etag":null,"topics":["event","handlers","pure-javascript","scroll"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/hanko","language":"HTML","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/nju33.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-25T17:23:14.000Z","updated_at":"2017-04-13T23:08:15.000Z","dependencies_parsed_at":"2022-09-06T07:00:27.669Z","dependency_job_id":null,"html_url":"https://github.com/nju33/hanko","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/nju33%2Fhanko","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nju33%2Fhanko/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nju33%2Fhanko/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nju33%2Fhanko/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nju33","download_url":"https://codeload.github.com/nju33/hanko/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243869318,"owners_count":20360993,"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":["event","handlers","pure-javascript","scroll"],"created_at":"2024-11-22T12:13:56.909Z","updated_at":"2026-01-04T04:02:50.928Z","avatar_url":"https://github.com/nju33.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hanko\n\n[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)\n[![Build Status](https://travis-ci.org/nju33/hanko.svg?branch=master)](https://travis-ci.org/nju33/hanko)\n\nDo various things at the scroll position.\n\n![screenshot](https://github.com/nju33/hanko/raw/master/images/screenshot.gif?raw=true)\n\n\n## Install or Download\n\n```sh\nyarn add hanko\nnpm i -S hanko\n```\n\nOr access to [releases page](https://github.com/nju33/hanko/releases).\nThen, download the latest version.\n\n## Usage\n\n```html\n\u003c!-- Target the following `.target` --\u003e\n\u003cdiv class=\"target\"\u003e...\u003c/div\u003e\n\u003cdiv class=\"target\"\u003e...\u003c/div\u003e\n\n\u003c!-- The element after init () becomes like this --\u003e\n\u003cdiv class=\"target hanko-target hanko-deactive\"\u003e\u003c/div\u003e\n\n\u003c!-- When entering the territory of elements, it becomes --\u003e\n\u003cdiv class=\"target hanko-target hanko-active\"\u003e\u003c/div\u003e\n\n\u003c!--\n  Just before becoming active,\n  a class of `hanko-entry` is attached only for a moment,\n  if there is a `transition`, `hanko-entry` is followed by\n  a class of `hanko-entry-to` will be attached only during `transition-duration`.\n--\u003e\n\u003cdiv class=\"target hanko-target hanko-entry hanko-entry-to\"\u003e\u003c/div\u003e\n\n\u003c!--\n  Just before becoming deactivated,\n  classes `hanko-leave` and `hanko-leave-to` are attached.\n--\u003e\n\u003cdiv class=\"target hanko-target hanko-leave hanko-leave-to\"\u003e\u003c/div\u003e\n\n\u003c!--\n  You can adjust the position of the entry and have the following.\n\n  - top / When the element is at the top of the screen\n  - center / When the element is in the center of the screen\n  - bottom / When the element is at the bottom of the screen\n  - css-value / 2em,10px,etc / Expand the territory by the value specified above the element\n--\u003e\n\u003c!-- default:'top' --\u003e\n\u003cdiv data-hanko-offset=\"center\"\u003eHeading 2\u003c/h2\u003e\n\n\u003c!-- When reading by itself --\u003e\n\u003cscript src=\"/path/tp/hanko.js\"\u003e\u003c/script\u003e\n```\n\n```js\nimport Hanko from 'hanko';\n\nwindow.addEventListener('DOMContentLoaded', () =\u003e {\n  const els = document.getElementsByClassName('target');\n  const hanko = new Hanko(els, {\n    // Process every 20 milliseconds\n    scrollWait: 20,\n    // After completion of scrolling, once again after specified milliseconds\n    resizeWait: 50\n  });\n  // Initialization\n  hanko.init();\n\n  // If you wanna use the following events\n  for (const el of els) {\n    // When entering the territory\n    el.addEventListener('hankoenter', ev =\u003e {...});\n    // When leaving the territory\n    el.addEventListener('hankoleave', ev =\u003e {...});\n    // When it becomes active\n    el.addEventListener('hankoenterend', ev =\u003e {...});\n    // When it becomes deactive\n    el.addEventListener('hankoleaveend', ev =\u003e {...});\n  }\n\n  setTimeout(() =\u003e {\n    // Deactivate all elements. (except for the `HTMLElement` element specified in `inoreElements`)\n    hanko.leave([ignoreElements]);\n\n    // Reset such as event\n    hanko.teardown();\n  }, 99999...)\n});\n```\n\n### Example\n\n- `test/fixtures/`\n- `example/webpack/`\n\n## LICENSE\n\nThe MIT License (MIT)\n\nCopyright (c) 2017 nju33 \u003cnju33.ki@gmail.com\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnju33%2Fhanko","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnju33%2Fhanko","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnju33%2Fhanko/lists"}