{"id":15495014,"url":"https://github.com/chnapy/floating_text","last_synced_at":"2025-05-14T11:32:16.256Z","repository":{"id":85641169,"uuid":"71310368","full_name":"Chnapy/floating_text","owner":"Chnapy","description":"Very little Javascript-JQuery library for make text floating.","archived":false,"fork":false,"pushed_at":"2016-10-21T01:45:50.000Z","size":7060,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-19T12:16:10.120Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/Chnapy.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2016-10-19T02:22:38.000Z","updated_at":"2016-10-21T00:58:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"7be4df11-e64d-4b2b-89dc-2720469b8336","html_url":"https://github.com/Chnapy/floating_text","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"5f0e24a3424a0136f0ad363e4e2c3c8141d09306"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chnapy%2Ffloating_text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chnapy%2Ffloating_text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chnapy%2Ffloating_text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chnapy%2Ffloating_text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chnapy","download_url":"https://codeload.github.com/Chnapy/floating_text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254131539,"owners_count":22019947,"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-10-02T08:15:47.541Z","updated_at":"2025-05-14T11:32:16.188Z","avatar_url":"https://github.com/Chnapy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# floating_text\nv0.2\n\nVery little library for render text floating with only Javascript and JQuery. So **it requires JQuery**.\n\nGIFs are better than words :\n\n![alt tag](readme_img/float_general.gif)\n![alt tag](readme_img/slower.gif)\n![alt tag](readme_img/slow.gif)\n![alt tag](readme_img/boiling.gif)\n![alt tag](readme_img/out.gif)\n\n## How to use\n\n### Include file\n\nFirst you have to include in your HTML the following files:\n\nAt the end of `body`\n```html\n\u003cscript src=\"your_path/floating_text.js\"\u003e\u003c/script\u003e\n```\n\nDon't forget to include JQuery **before** this library !\nExample:\n```html\n\u003cscript src=\"https://code.jquery.com/jquery-2.2.4.min.js\"\u003e\u003c/script\u003e\n```\n\n### JS functions\n\nThen, when you want to launch the floating effect (at any moment), you have to launch a javascript function:\n```javascript\n\tFLOATING_TEXT.float();\n```\nor with parameters\n```javascript\n\tFLOATING_TEXT.float(element, recursive);\n```\n`element` is a HTML element that you can pick with JQuery.\n`recursive` is a boolean that indicate to check children of `element` in addition of him. By default it's set to false;\n\nNote that `FLOATING_TEXT.float();` is exactly like `FLOATING_TEXT.float($('body'), true);`\n\nFloating_text has multiple default values that can be modify with the change functions :\n```javascript\n\tFLOATING_TEXT.changeHTMLvalues({\n\t\tFLOAT_CLASS_NAME: 'floating_text',\n\t\tFLOAT_CLASS_ACTIVE: 'run-animation',\n\t\tCHAR_DOM: 'span',\n\t\tCHAR_CLASS_NAME: 'floating_text_char'\n\t});\n\t\n\tFLOATING_TEXT.changeANIMATIONvalues({\n\t\tDURATION: 1.0,\n\t\tTRANSLATE_VAL: 2.0\n\t});\n\t\n\tFLOATING_TEXT.changeDATAnames({\n\t\tDURATION: 'float-duration',\n\t\tTRANSLATE_VAL: 'float-translate'\n\t});\n```\nYou don't have to specify all the attributes. Mention only those that you want change.\n**Be sure to call these functions BEFORE the first call of `float()` function !**\n\nYou can also use some secondary functions :\n```javascript\n\tFLOATING_TEXT.isInitialized();\n\t\n\tFLOATING_TEXT.getVersion();\n```\n`FLOATING_TEXT.isInitialized()` return a boolean that say if the library is initialized or not. Understand that when it is initialized, you CAN NOT call change functions anymore !\n\n`FLOATING_TEXT.getVersion()` simply return a string containing the actual version of the library.\n\n### HTML data\n\nIn HTML your elements have to have the class `floating_text` (class names can be changed) when they are targeted by the `float()` js function.\nThe class `run-animation` is necessary for animation running, but it can be add (and remove) at any moment to control the running state.\n```HTML\n\t\t\u003cdiv class=\"floating_text run-animation\" id=\"example-1\"\u003e\n\t\t\tExample1 floating text (duration: 1s/keyframe [default value]) (translate: 2px/keyframe [default value])\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003cdiv class=\"floating_text run-animation\" id=\"example-2\" data-float-duration='3'\u003e\n\t\t\tExample2 floating text (duration: 3s/keyframe) (translate: 1px/keyframe [default value])\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003cdiv class=\"floating_text run-animation\" id=\"example-3\" data-float-duration='0.5' data-float-translate='1'\u003e\n\t\t\tExample3 floating text (duration: 0.5s/keyframe) (translate: 1px/keyframe)\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003cdiv class=\"floating_text run-animation\" id=\"example-4\" data-float-duration='0.25' data-float-translate='1'\u003e\n\t\t\tExample4 floating text (duration: 0.25s/keyframe) (translate: 1px/keyframe)\n\t\t\u003c/div\u003e\n```\nLike in this example, we can add **data attributes** in each floating text element. If you don't add them, it just will use the default values (who are changeable).\n\nYou can specify the duration of each keyframe with `data-float-duration` and a float value in seconds. And the translate value of each keyframe with `data-float-translate` and a float value in pixels.\n\nThereby you can specify a different comportment for each element, directly in HTML.\n\nSo, download and check the example ! :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchnapy%2Ffloating_text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchnapy%2Ffloating_text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchnapy%2Ffloating_text/lists"}