{"id":20038225,"url":"https://github.com/jjcosgrove/jquery-aniview","last_synced_at":"2025-04-05T11:13:19.801Z","repository":{"id":30504181,"uuid":"34058556","full_name":"jjcosgrove/jquery-aniview","owner":"jjcosgrove","description":"A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.","archived":false,"fork":false,"pushed_at":"2021-08-01T14:23:06.000Z","size":79,"stargazers_count":215,"open_issues_count":3,"forks_count":45,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-29T10:09:45.926Z","etag":null,"topics":["animation","javascript","jquery","jquery-plugin"],"latest_commit_sha":null,"homepage":"","language":null,"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/jjcosgrove.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":"2015-04-16T13:50:55.000Z","updated_at":"2025-02-01T10:56:18.000Z","dependencies_parsed_at":"2022-08-02T15:15:30.962Z","dependency_job_id":null,"html_url":"https://github.com/jjcosgrove/jquery-aniview","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjcosgrove%2Fjquery-aniview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjcosgrove%2Fjquery-aniview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjcosgrove%2Fjquery-aniview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjcosgrove%2Fjquery-aniview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jjcosgrove","download_url":"https://codeload.github.com/jjcosgrove/jquery-aniview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325696,"owners_count":20920714,"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":["animation","javascript","jquery","jquery-plugin"],"created_at":"2024-11-13T10:26:52.530Z","updated_at":"2025-04-05T11:13:19.764Z","avatar_url":"https://github.com/jjcosgrove.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery AniView\n\nA jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4.x of animate.css\n\n## Demo\n\nhttp://jjcosgrove.github.io/jquery-aniview/\n\n## Installation (via npm)\n\n```Shell\nnpm install jquery-aniview\n```\n\n## CDN\n\nInstead of a local installation you may request a remote copy of jQuery AniView from [unpkg CDN](https://unpkg.com/).\n\nTo request the latest version, use the following:\n\n```HTML\n\u003cscript src=\"https://unpkg.com/jquery-aniview/dist/jquery.aniview.js\"\u003e\u003c/script\u003e\n```\n\nFor maximum security you may also decide to:\n\n* reference a specific version of jQuery AniView\n\n* [generate a SRI hash](https://www.srihash.org/) of that version and use it to ensure integrity\n\n* set the [CORS settings attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) to make anonymous requests to CDN\n\nExample:\n\n```HTML\n\u003cscript src=\"https://unpkg.com/jquery-aniview@1.0.3/dist/jquery.aniview.js\" integrity=\"sha384-uvboBeyPkVGldyoicVJST1JEAbxI2W0lG2fFOyGvahZrC4jWiv0vmryxw9NXIEn6\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\n## Initialisation\n```JavaScript\n$('.aniview').AniView();\n```\n## Options\n```JavaScript\nvar options = {\n    animateClass: 'animated',\n    animateThreshold: 100,\n    scrollPollInterval: 50\n}\n$('.aniview').AniView(options);\n```\nOption  | Type | Description |  Default\n------------- | ------------- | ------------- | -------------\nanimateClass | string | the animate.css class to use: 'animated' enables v3.x support and 'animate__animated' to enable v4.x support | animated\nanimateThreshold  | int | +ve numbers delay the animation sequence until the specified number of pixels have come into view. -ve numbers will trigger the animation sequence prior to the element coming into view. | 0\nscrollPollInterval  | int | The frequency at which user scrolling is 'polled' i.e. tested. This is in milliseconds (ms) and is an extension to jQuery's in-built 'scroll' event/handler. | 20\n## Markup v3\n```HTML\n\u003cdiv class=\"aniview\" data-av-animation=\"slideInRight\"\u003e\u003c/div\u003e\n```\n\n## Markup v4\n```HTML\n\u003cdiv class=\"aniview\" data-av-animation=\"animate__jackInTheBox\"\u003e\u003c/div\u003e\n```\n\n## Full Example\n\nA typical working example (minimal) might look something like this:\n\n```HTML\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eMy AniView Page\u003c/title\u003e\n    \u003c!-- use the correct 'animateClass' option for your version! --\u003e\n    \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"animate.css\"\u003e\n    \u003cscript type=\"text/javascript\" src=\"jquery.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"jquery.aniview.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        $(document).ready(function(){\n            $('.aniview-v3').AniView();\n            $('.aniview-v4').AniView({\n                animateClass: 'animate__animated'\n            });\n        });\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv\u003e\n        \u003cp class=\"aniview-v3\" data-av-animation=\"slideInRight\"\u003e\n            This is my awesome animated element using v3!\n        \u003c/p\u003e\n        \u003cp class=\"aniview-v4\" data-av-animation=\"animate__jackInTheBox\"\u003e\n            This is my awesome animated element using v4!\n        \u003c/p\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n## Notes\n\nAny element already in the viewport when the user loads the page will have it's animation triggered immediately if one has been set. In other words, it will not wait for the user to begin scrolling before initiating the animation on these elements.\n\n## Contribute\n\nBugs or feature requests/contributions can be done via:\n\n[https://github.com/jjcosgrove/jquery-aniview/issues](https://github.com/jjcosgrove/jquery-aniview/issues)\n\n## Authors\n\n* Just me for now.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjjcosgrove%2Fjquery-aniview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjjcosgrove%2Fjquery-aniview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjjcosgrove%2Fjquery-aniview/lists"}