{"id":15046902,"url":"https://github.com/mrsaints/morphext","last_synced_at":"2025-04-05T06:02:13.625Z","repository":{"id":12378041,"uuid":"15029669","full_name":"MrSaints/Morphext","owner":"MrSaints","description":"A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css.","archived":false,"fork":false,"pushed_at":"2018-02-08T18:18:58.000Z","size":118,"stargazers_count":395,"open_issues_count":12,"forks_count":67,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-05T06:01:54.422Z","etag":null,"topics":["animatecss","carousel","carousel-plugin","cross-browser","css","css-animations","css3","css3-animations","html","javascript","jquery","rotating-phrases","smooth-animations"],"latest_commit_sha":null,"homepage":"https://morphext.fyianlai.com/","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/MrSaints.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":"2013-12-08T19:22:30.000Z","updated_at":"2025-03-10T19:34:53.000Z","dependencies_parsed_at":"2022-08-29T09:51:52.700Z","dependency_job_id":null,"html_url":"https://github.com/MrSaints/Morphext","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/MrSaints%2FMorphext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrSaints%2FMorphext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrSaints%2FMorphext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrSaints%2FMorphext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrSaints","download_url":"https://codeload.github.com/MrSaints/Morphext/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294514,"owners_count":20915340,"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":["animatecss","carousel","carousel-plugin","cross-browser","css","css-animations","css3","css3-animations","html","javascript","jquery","rotating-phrases","smooth-animations"],"created_at":"2024-09-24T20:53:43.449Z","updated_at":"2025-04-05T06:02:13.594Z","avatar_url":"https://github.com/MrSaints.png","language":"HTML","readme":"Morphext\n========\n\n[![Dev Dependency Status](https://david-dm.org/MrSaints/Morphext/dev-status.svg?style=flat)](https://david-dm.org/MrSaints/Morphext#info=devDependencies)\n\nA simple, high-performance and cross-browser [jQuery][jquery] rotating / carousel plugin for text phrases powered by [Animate.css][animatecss]. It is more succinctly described by [Softpedia](http://webscripts.softpedia.com/script/Text-Management/Text-Tools/Morphext-82875.html) as:\n\n\u003e A [jQuery][jquery] plugin for creating text-based carousels, rotating small or large pieces of text one after the other, just like a slider does with images... This can be a great tool for displaying catch phrases, mission statements, tag lines, and so on.\n\nIf you would like to achieve a similar effect with more flexibility (e.g. out animation) and with HTML objects rather than text phrases (e.g. unordered list items), please check out [Morphist][morphist].\n\n[Website][website] / [Demo][demo]\n\n\nInstall\n-------\n\nDownload from the [project page][downloads].\n\nInstall with [Bower][bower]: `bower install --save Morphext`\n\n\nUsage\n-----\n\n1. Import the latest [Animate.css][animatecss] and [jQuery][jquery] library into your HTML.\n\n2. Import `morphext.css` and include `morphext.min.js` in your HTML document.\n\n3. Encapsulate your rotating phrases in an element and separate each phrase with a comma or a separator of your choice:\n\n    ```html\n    I am a \u003cspan id=\"js-rotating\"\u003eSo Simple, Very Doge, Much Wow, Such Cool\u003c/span\u003e Text Rotator\n    ```\n\n4. Trigger the plugin by calling Morphext() on the element containing the rotating phrases:\n\n    ```js\n    $(\"#js-rotating\").Morphext();\n    ```\n\nA demo titled `index.html` is included in this repository. Open it to see the end-result.\n\n\nOptions\n-------\n\nMorphext exposes the following options to alter the behaviour of the plugin:\n\nOption | Type | Default | Description\n--- | --- | --- | ---\nanimation | `string` | `bounceIn` | The [in] animation type. Refer to [Animate.css][animatecss] for a list of available animations.\nseparator | `string` | `,` | An array of phrases to rotate are created based on this separator. Change it if you wish to separate the phrases differently (e.g. So Simple / Very Doge / Much Wow / Such Cool).\nspeed | `int` | `2000` | The delay between the changing of each phrase in milliseconds.\ncomplete | `object Function` | `null` | A callback that is executed after an item is animated in.\n\nThey may be used like so:\n\n```js\n$(\"#js-rotating\").Morphext({\n    animation: \"fadeIn\", // Overrides default \"bounceIn\"\n    separator: \"|\", // Overrides default \",\"\n    speed: 3000, // Overrides default 2000\n    complete: function () {\n        // Overrides default empty function\n    }\n});\n```\n\nThe plugin relies heavily on [Animate.css][animatecss] for its [smooth, high performance animations](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) to transition between each phrase. Thus, the default animation speed (different from the interval between each phrase as described above) may be altered via CSS:\n\n```css\n#yourElement, .yourClass {\n    /* Overrides Animate.css 1s duration */\n    -vendor-animation-duration: 3s;\n}\n```\n\n\n\"Issues\"\n----------\n\nIssue | Description | Solution\n--- | --- | ---\nViewport | Certain animations (e.g. \"up\" and \"down\") by [Animate.css][animatecss] involves translating the element beyond the viewport thereby leading to unintended vertical and/or horizontal whitespace (further evident by the scrollbar \"following\" the animation effect. This is not a bug. | It may be eradicated by applying `overflow: hidden;` (CSS) to the parent of the element being animated.\nJavaScript | JavaScript is required for the addition / removal of elements with [Animate.css][animatecss] [CSS animation] classes thereby creating the \"transitioning effect\". If JavaScript is disabled or unavailable, nothing will happen. All the phrases and its separator will be shown as it is (graceful degradation). | N/A\nCSS3 | [Animate.css][animatecss] relies on CSS3 animations and transformations (available in most modern browsers). If CSS3 is disabled or unavailable, the phrases will continue to transition from one to another (assuming JavaScript is enabled), but there will be no animation effect. | No fallback is provided by this plugin. You may however, handle the fallback through the use of [Modernizr](http://modernizr.com/) (for feature detection) and [polyfills](http://html5polyfill.com/).\n\nShould you encounter any problems or require assistance with this plugin, simply open a GitHub issue in this repository or you may contact [me via Twitter][twitter].\n\n\nPrerequisites\n-------------\n\n- [jQuery][jquery]\n- [Animate.css][animatecss]\n\n\nOthers\n------\n\nNative ports of Morphext have been developed in other JavaScript frameworks (e.g. [React](http://facebook.github.io/react/) and [Polymer](http://www.polymer-project.org/)):\n\n- [Morphext React][morphext-react]\n- [Morphext Polymer][morphext-polymer]\n\nThey are not part of the official plugin development and the approach used in developing these ports may not be idiomatic. Please use them at your own risk.\n\nIssues and pull requests are welcomed.\n\n\nLicense\n-------\n\nMorphext is licensed under the MIT license [(http://ian.mit-license.org/)](http://ian.mit-license.org/).\n\n  [website]: http://morphext.fyianlai.com/\n  [twitter]: https://www.twitter.com/MrSaints\n  [demo]: http://www.enactuslse.co.uk/\n  [downloads]: https://github.com/MrSaints/Morphext/releases\n\n  [bower]: http://bower.io/\n  [jquery]: https://www.jquery.com/\n  [animatecss]: //daneden.github.io/animate.css/\n\n  [morphist]: https://github.com/MrSaints/Morphist\n  [morphext-react]: https://gist.github.com/MrSaints/7e84c68c086d5a6a3ee2#file-morphext-react-jsx\n  [morphext-polymer]: https://gist.github.com/MrSaints/7e84c68c086d5a6a3ee2#file-morphext-polymer-html\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrsaints%2Fmorphext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrsaints%2Fmorphext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrsaints%2Fmorphext/lists"}